@charset "UTF-8";
/* Variables */
body {
  background-color: #010306;
}

.hidden {
  display: none;
}

.center {
  text-align: center;
}

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

.padding-left-0 {
  padding-left: 0px !important;
}

.margin-bottom-1 {
  margin-bottom: 1rem !important;
}

.font-size-16 {
  font-size: 16px;
}

.purps {
  color: #925EEE;
}

.drop-shadow {
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.no-break {
  text-wrap: nowrap;
}

.underline-link a {
  text-decoration: underline;
}

.source-code-pro {
  font-family: "Source Code Pro", monospace;
  font-optical-sizing: auto;
  font-style: normal;
}

/* https://slicejack.com/fullscreen-html5-video-background-css/ */
.fullscreen-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -100;
}

.fullscreen-bg__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.overlay {
  background: radial-gradient(transparent 0%, #000 60%);
  opacity: 0.75;
}

@media (min-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    height: 300%;
    top: -100%;
  }
}
@media (max-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    width: 300%;
    left: -100%;
  }
}
#logo {
  background: url("/media/appland-logo-gradient.svg") no-repeat;
  background-position: center;
  background-size: contain;
  height: 3em;
}

#tagline {
  font-family: "Montserrat", sans-serif;
  color: #fff;
}

.container {
  width: 100%;
  max-width: 350px;
  padding: 15px;
  margin: auto;
}

#tac {
  max-width: 1000px;
  padding: 15px;
}

.control {
  padding: 0.375rem 0.75rem;
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  line-height: 1.5;
}

.input-dark {
  background-color: rgba(0, 0, 0, 0.1);
  border: 1px solid #c51d9f;
  color: #757575;
  color: #fff;
  font-size: 1rem;
  border-radius: 0;
}

.input-dark:focus {
  outline-offset: 0;
  border-color: #c51d9f;
  box-shadow: none;
  outline: 0 none;
}

.value-changed {
  color: #fff !important;
}

.dropdown-toggle {
  text-align: left;
  color: #e3e5e8;
  cursor: pointer;
}

.product-nav-item .dropdown-toggle::after {
  color: #fb61fb;
}

.dropdown-item {
  color: #fff;
  transition: all 0.3s ease;
}
.dropdown-item:hover {
  background: #C242B1;
  border-radius: 0.5rem;
  color: white;
}

.dropdown-menu {
  background-color: #1a1a1a;
  left: unset;
}
.dropdown-menu a {
  color: white;
}
.dropdown-menu.show {
  background-color: #02070f;
}

.btn {
  outline: 0;
  border: none;
  border-radius: 2rem;
  transition: all 0.3s ease;
}
.btn:focus {
  border: 1px solid #808b98;
  box-shadow: none;
  outline: 0;
  box-shadow: none;
}
.btn:hover {
  border: none;
  box-shadow: none;
  outline: 0;
  color: #fff;
  box-shadow: none;
}
.btn:active {
  border: inherit;
  box-shadow: none;
  outline: 0;
}
.btn.btn-main:active {
  border: 1px solid #9C2FBA;
}

.nav-item .nav-link.btn {
  padding: 0.375rem 0.75rem;
}

.btn-main {
  background-color: #C242B1;
  border: 1px solid #C242B1;
  color: #e3e5e8;
}
.btn-main:hover {
  background-color: #9C2FBA;
  border: 1px solid #9C2FBA;
}

.btn-primary {
  background-color: #C242B1;
  border: 0;
  outline: 0;
  border-radius: 2rem;
  transition: all 0.3s ease;
}
.btn-primary:hover {
  background-color: #77276d;
  outline: 0;
}
.btn-primary:focus {
  outline: 0;
  background-color: #77276d;
}
.btn-primary:not(:disabled):not(.disabled):active {
  outline: 0;
  background-color: #77276d;
}

.btn-dark {
  background-color: #010306;
  border: none;
}
.btn-dark:hover {
  background-color: #5a6268;
  border: 0;
}
.btn-dark:active {
  border: 0;
}
.btn-dark:focus-within {
  border: 0;
}

.btn-cta {
  padding: 0 0.25rem;
}

.btn-vscode {
  background-color: #EAEAEA;
  color: #171e2f;
  border: none;
  margin-top: 4px;
  transition: all 0.3s ease;
}
.btn-vscode:hover {
  color: #E1E2E2;
  background-color: #808b98;
}
.btn-vscode img {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.25rem;
}

.btn-ghost {
  background-color: none;
  border: 1px solid #925EEE;
  color: #e3e5e8;
  transition: all 0.3s ease;
}
.btn-ghost:hover {
  border: 1px solid #581a69;
  color: #9ca5af;
}

.btn-search {
  background-color: #808b98;
  border: 1px solid #808b98;
  color: #171e2f;
  transition: all 0.3s ease;
}
.btn-search:hover {
  background-color: #67727e;
}

.alert-dark {
  background-color: #925EEE;
  color: white;
  border-color: #925EEE;
}
.alert-dark hr {
  border-color: white;
}
.alert-dark .btn-dark:hover {
  background-color: #2b0868;
}
.alert-dark .alert-link {
  color: white;
}

audio {
  display: none;
}

.audio-playback {
  opacity: 1;
  cursor: pointer;
}

.audio-playback.toggle {
  width: 4em;
  height: 4em;
  position: fixed;
  right: 1em;
  bottom: 1em;
}

.audio-playback.overlay {
  width: 15em;
  height: 15em;
  margin: 0px auto;
}

.audio-playback:hover {
  opacity: 1;
}

.audio-playback.overlay.audio-playback[data-playing] {
  background-size: auto;
}

.audio-playback[data-playing] {
  background: url("/media/equalizer.gif") no-repeat;
  background-position: center;
  background-size: 2em 3em;
}

.audio-playback[data-playing=true] {
  background: url("/media/pause-button.svg") no-repeat;
  background-position: center;
  background-size: 6em 6em;
}

input.mce_inline_error {
  border-color: #c51d9f !important;
}

div.mce_inline_error {
  display: none !important;
}

#mce-responses {
  width: 100%;
}

.mc_response {
  font-family: "Montserrat", sans-serif;
  color: #fff;
}

.mc_response a {
  text-decoration: none;
  color: #6e9cff;
}

/* Global */
html {
  background-color: #010306;
  scroll-behavior: smooth;
}

body {
  font-family: "Open Sans", sans-serif;
  background-color: #010306;
  color: rgba(227, 229, 232, 0.8901960784);
  font-size: 16px;
  line-height: 1.8rem;
  margin: 0;
  font-weight: 400;
}
body.home-layout {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto 1fr auto;
  grid-row-start: 1;
  grid-row-end: 3;
}
body.features .feature-wrap {
  padding: 0 4rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Open Sans", sans-serif;
}

h1 {
  font-size: 3rem;
  font-weight: 800;
  line-height: 3.5rem;
}

.container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0;
}
.container.home .logo {
  opacity: 0;
}
.container.promo-form {
  height: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.container.home-page-container {
  max-width: 100%;
}

a {
  color: #759bff;
  text-decoration: none;
}
a:hover {
  color: #889dd2;
}

a.white-link {
  color: white;
  text-decoration: underline;
}
a.white-link:hover {
  color: #4362b1;
}

p {
  margin: 1.5rem 0;
}

.site-title {
  color: #C242B1;
  font-weight: 300;
}

cite {
  font-size: 1rem;
}

.telemetry-px {
  display: block;
}

.banner {
  width: 100%;
  background: linear-gradient(45deg, #c242b1, #471f8e 100%);
  margin-top: 0;
  margin-bottom: 0;
  height: fit-content;
  height: fit-content;
  padding: 0.5rem;
  padding-left: 1rem;
  text-align: center;
  color: rgba(227, 229, 232, 0.8901960784);
}
.banner a {
  color: rgba(227, 229, 232, 0.8901960784);
  text-decoration: underline;
}
.banner code {
  background-color: rgba(183, 175, 191, 0.25);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
nav .logo {
  width: 10rem;
  display: inline-block;
  text-indent: -9999px;
  background-image: url(/assets/img/appland-logo-gradient.svg);
  background-repeat: no-repeat;
  background-position: center;
}
nav .nav-links {
  display: flex;
  align-items: center;
  font-size: 1rem;
}
nav .nav-links a {
  text-decoration: none;
  color: #e3e5e8;
  margin-left: 1rem;
}
nav .nav-links a:hover {
  color: #637ec4;
}

.navie-status .badge-pill {
  padding-right: 9px;
  padding-left: 0px;
  height: 9px;
}

.navbar-collapse {
  background-color: #010306;
}

.nav-wrap {
  margin-top: 1rem;
}
.nav-wrap.secondary .dropdown-item {
  border: 2px solid #283451;
  color: #808b98;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
}
.nav-wrap.secondary .dropdown-item:hover {
  background-color: #283451;
  color: #e3e5e8;
}

#cloud-icon-nav {
  color: #C242B1;
  font-size: 24px;
  vertical-align: top;
  margin-right: 5px;
}

.dropdown-menu {
  padding: 10px;
  margin: -0.125rem 0 0;
}
.dropdown-menu hr {
  border-top: 1px solid #926dd4;
}

.dropdown-divider {
  border-top: 1px solid #273751;
}

.resources-list {
  display: inline-flex;
}

.sub-list {
  list-style-type: none;
  padding: 0;
  margin-bottom: 1rem;
}
.sub-list:last-of-type {
  margin-bottom: 0;
}
.sub-list h5 {
  padding: 0.5rem 1.5rem;
  color: #808b98;
  margin: 0;
}
.sub-list li {
  color: #e3e5e8;
  border-bottom: 1px solid #171e2f;
  padding: 0.35rem 1.5rem;
  transition: all 0.3s ease;
}
.sub-list li a {
  color: #e3e5e8;
  transition: all 0.3s ease;
  display: inline-block;
  width: 100%;
}
.sub-list li em {
  font-weight: 500;
  color: #808b98;
}
.sub-list li .social-icon {
  width: 1.25rem;
  margin: 0 0.5rem;
  height: 1.25rem;
}
.sub-list li:first-of-type {
  border-top: 1px solid #171e2f;
}
.sub-list li:hover {
  background-color: #C242B1;
}
.sub-list li:hover a {
  color: #e3e5e8;
  text-decoration: none;
}

.material-icons {
  color: #808b98;
  font-size: 11px;
  display: inline-block;
  vertical-align: middle;
}

#waving-hand-icon {
  color: #806be6;
  font-size: 19px;
  margin-right: 6px;
  margin-top: -5px;
}

.blog-page-heading {
  margin: auto;
  margin-top: 3rem;
  margin-bottom: 1rem;
}

.page-heading {
  margin: 2rem;
}

.header-button-wrap {
  display: flex;
}
.header-button-wrap .btn {
  height: 52px;
  margin-left: auto;
  vertical-align: middle;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.blog-gallery {
  margin: auto;
}
.blog-gallery img {
  width: 200px;
}

.blog-gallery-link {
  margin: auto;
  font-size: 14px;
}

.blog-post-list {
  list-style-type: none;
  padding: 2rem 0 0 0;
  display: grid;
  grid-template-columns: 31% 31% 31%;
  column-gap: 1rem;
  gap: 1rem;
}
.blog-post-list .blog-post {
  background-color: #1b1234;
  border: 1px solid #1b1234;
  border-radius: 1rem;
  padding: 0 1.5rem;
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  flex-direction: column;
  padding: 1rem;
  transition: all 0.5s ease;
}
.blog-post-list .blog-post .clickable-blog-card {
  text-decoration: none;
}
.blog-post-list .blog-post h2 {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 2rem;
  text-transform: unset;
  padding: 0;
  margin-bottom: 0;
  margin-top: 0.5rem;
}
.blog-post-list .blog-post h2 .post-exerpt {
  padding: 0 1rem;
  color: rgba(225, 226, 226, 0.6117647059);
  line-height: 1.65rem;
}
.blog-post-list .blog-post h2 a {
  color: #E1E2E2;
  line-height: 1.65rem;
  transition: all 0.5s ease;
}
.blog-post-list .blog-post h2:hover a {
  color: #C242B1;
  text-decoration: none;
}
.blog-post-list .blog-post .post-image {
  min-height: 350;
  width: 100%;
  border-radius: 0.5rem;
}
.blog-post-list .blog-post .post-image.post-thumb {
  width: 100%;
  margin: 0;
}
.blog-post-list .blog-post .post-exerpt {
  color: rgba(225, 226, 226, 0.6117647059);
  line-height: 1.65rem;
}

.blog-post:has(a:hover) {
  border: 1px solid #C242B1;
}

figure.highlight {
  background-color: #171e2f;
  padding: 2rem;
  margin: 1.5rem 0;
  border-radius: 4px;
}

.post-content h1 {
  color: #925EEE;
  font-weight: 400;
  margin-bottom: 0.5rem;
}
.post-content .post-meta {
  color: #808b98;
  margin: 0;
}
.post-content img {
  max-width: 100%;
}

.post-body {
  max-width: 900px;
  margin: 2rem auto;
}
.post-body ul,
.post-body ol,
.post-body p,
.post-body div,
.post-body .post-meta {
  max-width: 800px;
  margin: 2rem auto;
  font-size: 1.25rem;
  line-height: 2rem;
}
.post-body img {
  max-width: 90%;
  height: auto;
  margin: 2rem auto 2rem auto;
  display: block;
  border: 1px solid #808b98;
}
.post-body img.nomargin {
  margin: 0;
}
.post-body img.noborder {
  border: none;
}
.post-body img.headshot {
  max-width: 50%;
  border-radius: 10px;
  border: none;
}
.post-body blockquote {
  color: #926dd4;
  text-align: center;
  margin: 0 0 0 2rem;
  max-width: 80%;
  margin-bottom: 2rem;
  text-align: left;
  font-weight: 800;
}
.post-body blockquote p {
  border-left: 2px solid #926dd4;
  padding-left: 2rem;
}
.post-body figure {
  text-align: center;
  color: #808b98;
  font-size: 0.9rem;
}
.post-body figure figcaption {
  margin-top: 0.3rem;
}
.post-body h1,
.post-body h2,
.post-body h3,
.post-body h4,
.post-body h5,
.post-body h6 {
  margin-top: 4rem;
  margin: 4rem auto 2rem auto;
}
.post-body hr {
  background-color: #9C2FBA;
}
.post-body .highlighter-rouge {
  max-width: 800px;
  align-items: center;
  position: relative;
}
.post-body pre {
  padding: 2rem;
}
.post-body .gist-file {
  border: none !important;
}
.post-body .gist-file tbody tr {
  background-color: white !important;
}
.post-body .gist-file .gist-data {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.post-body .gist-file .gist-meta {
  margin: 0 !important;
}
.post-body table,
.post-body th,
.post-body td {
  padding: 0.5rem;
  margin: auto;
}
.post-body th {
  font-size: 20px;
}
.post-body tbody tr:nth-child(odd) {
  background-color: #343742;
}
.post-body li.task-list-item {
  list-style-type: none;
}

.navbar {
  height: 60px;
}

footer {
  padding: 0 2rem;
}

.home-nav {
  position: fixed;
  right: 2rem;
  top: 0;
  list-style-type: none;
  padding: 0;
  display: flex;
  align-items: flex-start;
  margin: 0;
  transition: all 0.3s ease;
}
.home-nav li {
  margin-left: 1rem;
}
.home-nav a {
  color: #C242B1;
}
.home-nav a:hover {
  color: #9C2FBA;
  text-decoration: none;
}

button.navbar-toggler {
  border: none;
}

.navbar-brand {
  min-width: 150px;
  margin-left: 1rem;
  min-width: unset;
}

a.navbar-brand {
  padding: 0px;
}
a.navbar-brand img {
  width: 125px;
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
  outline: none;
  box-shadow: none;
}

.navbar-dark {
  background-color: #010306;
}

#navbarSupportedContent {
  background-color: #010306;
}

.navbar-nav .nav-item {
  padding-left: 1rem;
  font-size: 0.9rem;
}
.navbar-nav .nav-item .btn-primary,
.navbar-nav .nav-item .btn-vscode {
  margin-top: 0;
}

.navbar-dark .navbar-nav .nav-link .product-nav-item {
  color: #ff00ff;
}

.nav-item {
  margin-bottom: 0;
}
.nav-item .login {
  color: #C242B1;
  text-decoration: underline;
}
.nav-item .btn {
  font-size: 0.9rem;
}

.container.home .navbar-dark {
  background: none;
}

.navbar-dark .navbar-nav .nav-link {
  color: #e3e5e8;
  border-radius: 2rem;
}
.navbar-dark .navbar-nav .nav-link.product {
  text-shadow: none;
  display: flex;
  width: 100%;
  text-indent: -99999px;
  transition: all 0.3s ease;
  border-radius: 4px;
}
.navbar-dark .navbar-nav .nav-link.product.appmap {
  background-image: url("/assets/img/logos/appmap_logo.svg");
  background-repeat: no-repeat;
}
.navbar-dark .navbar-nav .nav-link.product img {
  margin-right: 0.5rem;
  height: 2rem;
  width: unset;
  max-width: 10rem;
}
.navbar-dark .navbar-nav .nav-link.product:hover {
  background-color: #C242B1;
}
.navbar-dark .navbar-nav .nav-link.code-editor {
  background-color: #e3e5e8;
  border-radius: 4px;
  padding: 0.2rem 0.75rem;
  color: #171e2f;
}
.navbar-dark .navbar-nav .nav-link.code-editor img {
  margin-right: 0.25rem;
}
.navbar-dark .navbar-nav .nav-link.code-editor:hover img {
  opacity: 0.8;
}

.code-editor-drop .dropdown-menu.show {
  background-color: #e3e5e8;
  border-radius: 4px;
  top: 82%;
  padding: 0;
}
.code-editor-drop .dropdown-menu.show .nav-wrap {
  margin: 0.5rem 0;
}
.code-editor-drop .dropdown-menu.show .nav-wrap .dropdown-item {
  padding: 0;
  color: #171e2f;
}
.code-editor-drop .dropdown-menu.show .nav-wrap .dropdown-item.btn.btn-code-editor-cta {
  color: #343742;
  transition: all 0.4s ease;
  padding: 0.5rem 0.75rem;
  border-radius: 0;
}
.code-editor-drop .dropdown-menu.show .nav-wrap .dropdown-item.btn.btn-code-editor-cta img {
  width: 2rem;
  height: 2rem;
  margin-right: 0.25rem;
}
.code-editor-drop .dropdown-menu.show .nav-wrap .dropdown-item.btn.btn-code-editor-cta:hover {
  color: #C242B1;
  background-color: transparent;
}
.code-editor-drop .dropdown-menu.show .nav-wrap .dropdown-item.btn.btn-code-editor-cta:hover img {
  opacity: 0.8;
}
.code-editor-drop .dropdown-menu.show .nav-wrap .dropdown-item.btn.btn-code-editor-cta:active {
  color: #797f96;
  background-color: transparent !important;
}
.code-editor-drop .dropdown-menu.show .nav-wrap .dropdown-item.border-b {
  border-bottom: 1px solid #808b98;
}

.social-icon {
  width: 0.9rem;
  height: 0.9rem;
  opacity: 0.85;
}
.social-icon:hover {
  opacity: 0.5;
}

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

.job-posting h1 {
  color: #C242B1;
  font-weight: 300;
  font-size: 3rem;
}
.job-posting h2 {
  font-weight: 400;
  color: #808b98;
  margin: 2rem 0 0.5rem 0;
}

.simple-head {
  margin: 30px 0;
  font-size: 4em;
  line-height: 1;
  letter-spacing: -1px;
}

.observability-features .platforms {
  padding: 2rem;
  align-items: center;
}
.observability-features .platform-box p {
  padding: 2rem;
}

.simple-section {
  width: 100%;
  text-align: center;
}

a.white-link {
  color: white;
  text-decoration: underline;
  font-weight: bold;
}

.info-table tr {
  padding: 1rem 0;
  border-bottom: 1px solid #808b98;
}
.info-table td,
.info-table th {
  padding: 1rem 0;
}
.info-table td ul,
.info-table th ul {
  margin: unset;
}
.info-table th {
  padding-right: 1rem;
}

.uppercase {
  text-transform: uppercase;
}

.centered {
  text-align: center;
}

.mx-a {
  margin-left: auto;
  margin-right: auto;
}

.max-width-600 {
  max-width: 600px;
}

.max-width-800 {
  max-width: 800px;
}

.purps {
  color: #925EEE;
}

.white {
  color: white !important;
}

.purple-border {
  border: 1px solid #925EEE;
}

.hotpink {
  color: #C242B1;
}

.product-icon {
  width: 1.25rem;
  margin-right: 0.25rem;
}

.nav-link.product {
  text-shadow: none;
}

@media (max-width: 992px) {
  .header-button-wrap {
    flex-direction: column;
  }
  .navbar-collapse {
    padding-bottom: 1rem;
  }
  .resources-list {
    display: contents;
  }
  .observability-features .platforms .platform-box:nth-child(2) {
    border-left: none;
    border-right: none;
  }
  .navbar {
    height: unset;
  }
}
@media (max-width: 768px) {
  .blog-post-list .blog-post {
    flex-direction: column;
    padding-top: 1rem;
    margin: 0;
  }
  .post-image.post-thumb {
    margin-right: 0px;
  }
}
footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 2rem;
}
footer a {
  color: #4362b1;
}
footer a:hover {
  color: #6e88c8;
  text-decoration: none;
}
footer .logo-small {
  width: 125px;
  margin-right: 2rem;
}
footer .link-wrap {
  display: flex;
  flex-direction: row;
}
footer .link-wrap ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  margin: 0;
}
footer .link-wrap ul.social-links {
  margin: 0 0 0 2rem;
}
footer .link-wrap ul li {
  margin: 0;
}

.newsletter-wrap {
  max-width: 250px;
}
.newsletter-wrap p {
  font-size: 0.9rem;
  margin: 0 0 1rem 0;
  font-weight: 400;
}
.newsletter-wrap .newsletter-cta {
  margin: 0 0 1rem 0;
  max-width: unset;
  width: 100%;
}
.newsletter-wrap .newsletter-cta .hbspt-form .hs_submit input {
  width: 100%;
}
.newsletter-wrap .newsletter-cta .hs_submit .actions {
  padding: 0;
}

@media (max-width: 992px) {
  footer {
    flex-direction: column;
    justify-content: center;
    height: unset;
  }
  footer .logo-small {
    margin: 0 0 1rem 0;
  }
  footer .link-wrap {
    flex-direction: column;
  }
  footer .link-wrap ul {
    justify-content: center;
  }
  footer .link-wrap ul.social-links {
    margin: 0;
    justify-content: center;
  }
}
@media (max-width: 500px) {
  footer {
    flex-direction: column;
    justify-content: center;
  }
  footer .logo-small {
    margin: 0 0 1rem 0;
  }
  footer .link-wrap {
    flex-direction: column;
  }
  footer .link-wrap ul {
    flex-direction: column;
    text-align: center;
  }
  footer .link-wrap ul.social-links {
    margin: 0;
    flex-direction: row;
  }
}
#home-body {
  background-size: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 80px);
  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 2s; /* Firefox < 16 */
  -ms-animation: fadein 2s; /* Internet Explorer */
  -o-animation: fadein 2s; /* Opera < 12.1 */
  animation: fadein 2s;
  font-weight: 400;
  background: rgb(28, 19, 52);
  background: linear-gradient(180deg, #150f26 0%, #010303 60%);
}
#home-body .use-case-feature ul {
  font-weight: 400;
}
#home-body .features-section-row {
  max-width: 1300px;
  width: 100%;
  text-align: center;
}
#home-body .features-section-row .three-col {
  width: 100%;
  display: flex;
  flex-direction: row;
}
#home-body .features-section-row .three-col .col {
  border-radius: 4px;
  background: #925EEE;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#home-body.info-page .feature-container p {
  margin: 1rem 0;
}

.logo-gradient {
  background: -webkit-linear-gradient(45deg, #C242B1, #925EEE 100%);
  height: 10px;
  width: 100%;
}

.user-logos {
  padding: 0 2rem;
}
.user-logos .section-header {
  width: 100%;
  padding: 0 3rem;
  margin-bottom: 0;
  text-align: center;
}
.user-logos .section-header h2 {
  font-family: "Open Sans", sans-serif;
  text-transform: uppercase;
  font-size: 3em;
  line-height: 3rem;
  font-weight: 800;
  background: -webkit-linear-gradient(45deg, #C242B1, #925EEE 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.user-logos .section-header .section-content {
  width: 70%;
  margin: 0 auto;
}
.user-logos .section-content {
  text-align: center;
}
.user-logos .section-content .section-header {
  width: 100%;
  text-align: left;
}
.user-logos .section-content .logo-block {
  background-image: url(/assets/img/user-logos.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 100%;
  height: 280px;
}
.user-logos .section-content .lang-block {
  background-image: url(/assets/img/appmap-languages.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 100%;
  height: 50px;
  margin-bottom: 1rem;
}
.user-logos .section-content p {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 3rem;
  background: -webkit-linear-gradient(45deg, #C242B1, #925EEE 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.user-logos .section-content p.text-over {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.appmap-languages {
  text-align: center;
  background: -webkit-linear-gradient(45deg, #471f8e, #c242b1 100%);
  padding: 4rem 0;
  margin-bottom: 4rem;
}
.appmap-languages.short {
  padding: 1rem 0;
  margin-bottom: 0rem;
}
.appmap-languages.language-bar {
  display: flex;
}
.appmap-languages.language-bar p {
  font-family: monospace;
}
.appmap-languages.language-bar div {
  width: fit-content;
  margin: auto;
  display: flex;
}
.appmap-languages.language-bar img {
  max-width: 250px;
  margin-top: 0px;
}
.appmap-languages h2 {
  font-family: "Open Sans", sans-serif;
  font-size: 5rem;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 1rem;
  color: #e3e5e8;
}
.appmap-languages img {
  width: 100%;
  max-width: 210px;
  padding: 1rem;
  margin-top: 0.5rem;
}

.section-content {
  max-width: 1300px;
  margin: auto;
  font-weight: 400;
}
.section-content p {
  margin-top: 0;
  margin-bottom: 1rem;
}
.section-content h1 {
  margin-bottom: 1rem;
}

.feature-split {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  padding: 3rem 0;
}
.feature-split .section-header {
  margin-bottom: 0;
  width: 100%;
}

.section-header.floating-section-header {
  margin-bottom: 0rem;
  padding-bottom: 1rem;
}

.highlighted {
  background-color: #220846;
  padding: 3rem;
}
.highlighted.split .highlight-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}
.highlighted .content-wrap {
  width: 100%;
  max-width: 38%;
  margin-right: 4rem;
}
.highlighted .section-header {
  width: 100%;
}
.highlighted .section-content p {
  margin-bottom: 0;
}
.highlighted img {
  max-width: 50%;
  padding: 3rem;
}

.feature-center {
  padding: 3rem;
}
.feature-center h2 {
  font-family: "Open Sans", sans-serif;
  text-transform: uppercase;
  font-size: 3em;
  line-height: 3rem;
  font-weight: 800;
  background: -webkit-linear-gradient(45deg, #C242B1, #925EEE 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.feature-center ul {
  margin-bottom: 0;
  margin-top: 1.5rem;
}
.feature-center .content-wrap {
  width: 100%;
  max-width: max-content;
  margin: 0 auto;
}
.feature-center p {
  font-size: 1.1em;
}

.feature-value {
  font-weight: bold;
  color: #925EEE;
}

.feature-callout {
  padding: 3rem 0 0 0;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.feature-callout ul {
  padding: 0;
  list-style-type: none;
  display: grid;
  justify-content: space-between;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1.25rem;
  height: 100%;
  align-content: center;
}
.feature-callout ul li {
  border: 1px solid #925EEE;
  border-radius: 4px;
  padding: 1.5rem 1rem;
  display: flex;
  align-items: center;
}
.feature-callout ul li p {
  margin: 0;
}
.feature-callout ul li .sm-logo {
  padding: 0;
  margin: 0 0.5rem;
  max-width: 4rem;
}
.feature-callout ul li.vert {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.feature-callout ul li.vert .logos {
  display: flex;
  flex-direction: row;
  margin-top: 1rem;
}
.feature-callout .box-wrap {
  display: flex;
  flex-direction: column;
}

@media (max-width: 1100px) {
  .feature-split {
    flex-direction: column;
  }
  .feature-callout {
    padding-top: 2rem;
  }
}
@media (max-width: 950px) {
  .appmap-languages {
    padding: 4rem 2rem;
  }
  .appmap-languages h2 {
    font-size: 4rem;
    line-height: 4rem;
  }
  .language-bar div {
    flex-direction: column;
    text-align: center;
  }
  .language-bar div img {
    margin: auto;
  }
  .language-bar div p {
    margin-bottom: 0px;
  }
}
@media (max-width: 900px) {
  .feature-callout ul {
    grid-template-columns: 1fr;
  }
  .user-logos .section-header {
    padding-bottom: 0;
  }
  .user-logos .section-header h2 {
    font-size: 4rem;
    line-height: 4rem;
  }
  .user-logos .section-header .section-content {
    width: 100%;
  }
  .user-logos .section-content .logo-block {
    background-image: url(/assets/img/logos-mid.svg);
    height: 420px;
    margin-bottom: 2rem;
  }
}
@media (max-width: 650px) {
  .user-logos .section-header {
    padding: 2rem 0;
  }
  .user-logos .section-content .logo-block {
    height: 375px;
  }
}
@media (max-width: 550px) {
  .user-logos .section-header {
    margin-bottom: 0;
  }
  .user-logos .section-header h2 {
    font-size: 3rem;
    line-height: 3rem;
  }
  .user-logos .section-content .logo-block {
    margin-bottom: 0;
  }
  .user-logos .section-content p {
    font-size: 1.25rem;
    font-weight: 500;
    padding: 0 0.5rem;
  }
}
@media (max-width: 500px) {
  .user-logos .section-content .logo-block {
    height: 450px;
    background-image: url(/assets/img/logos-small.svg);
  }
}
@media (max-width: 460px) {
  .appmap-languages {
    margin-bottom: 1rem;
  }
  .appmap-languages h2 {
    font-size: 3rem;
    line-height: 3rem;
  }
  .appmap-languages img {
    max-width: 325px;
    margin-top: 1rem;
  }
}
@media (max-width: 400px) {
  .user-logos .section-header {
    padding: 2rem 0;
  }
  .user-logos .section-header h2 {
    font-size: 2.5rem;
    line-height: 2.5rem;
  }
  .user-logos .section-content .logo-block {
    height: 375px;
  }
}
@media (max-width: 375px) {
  .appmap-languages h2 {
    font-size: 2rem;
    line-height: 2rem;
  }
}
.update-banner {
  text-align: center;
  border-bottom: 1px solid #C242B1;
}
.update-banner .banner-text {
  max-width: 500px;
}
.update-banner h1 {
  font-size: 2.5rem;
  color: #ad7fff;
  font-weight: 800;
  text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
}
.update-banner a {
  background-image: url(../img/appland_banner_1000_2.svg);
  background-size: cover;
  background-position: bottom -2px;
  transition: all 0.5s ease;
  color: #e3e5e8;
  padding: 2rem 1.5rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}
.update-banner a span {
  transition: all 0.5s ease;
  border-radius: 0.5rem;
  margin: 1rem 1rem 0.5rem 1rem;
  padding: 0.5rem 1rem;
  background-color: #925EEE;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
}
.update-banner a p {
  margin: 0;
  line-height: 1.5;
}
.update-banner a:hover {
  box-shadow: inset 0px 0px 20px rgba(0, 0, 0, 0.5);
}
.update-banner a:hover h1 {
  text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
}
.update-banner a:hover span {
  background-color: #7330e9;
  text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
}

@media (max-width: 800px) {
  .update-banner h1 {
    font-size: 2rem;
  }
  .update-banner span {
    font-size: 1.125rem;
    line-height: 1.5;
  }
  .update-banner .banner-text {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}
.hero .section-content {
  padding: 0 3rem;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  gap: 1rem;
  align-items: center;
  margin: auto;
  margin-bottom: 2rem;
}
.hero .section-content .hero-graphic {
  width: 40%;
  padding-top: 3rem;
}
.hero .section-content .hero-graphic img {
  width: 90%;
}
.hero .section-content .scroll-wrap {
  color: #925EEE;
  margin-bottom: 3rem;
}
.hero .section-content .scroll {
  position: relative;
  height: 100px;
  position: relative;
  overflow: hidden;
  font-weight: 800;
  font-size: 6rem;
  font-family: "Open Sans", sans-serif;
  padding: 0;
  color: #925EEE;
  animation-delay: 1.5s;
}
.hero .section-content .scroll .scroll-item {
  line-height: 70px;
  height: 100px;
}
.hero .section-content .splash {
  width: 60%;
  padding-top: 3rem;
}
.hero .section-content .splash h1 {
  font-size: 4rem;
  font-weight: 800;
  margin-bottom: 1rem;
  color: #925EEE;
}
.hero .section-content .splash h2 {
  margin-bottom: 1rem;
}
.hero .section-content .splash h2 span {
  margin-right: 0.25rem;
}
.hero .section-content .splash p {
  max-width: 80%;
}
.hero .section-content .splash em {
  display: inline-block;
}
.hero .section-content .splash .split-cta {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
}
.hero .section-content .splash .logo-small {
  width: 200px;
  margin-bottom: 2rem;
}
.hero .section-content .splash .subhead {
  font-size: 28px;
  font-weight: 400;
  margin-top: 1;
  color: #e3e5e8;
}
.hero .section-content .splash .urgent-subhead {
  font-weight: bold;
  font-style: italic;
}
.hero .section-content .splash .list-container {
  max-width: 45rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.hero .section-content .splash #primary-homepage-cta {
  margin-top: 2rem;
}
.hero .section-content .splash #primary-homepage-cta p {
  margin: 0 0 1rem 0;
}
.hero .section-content .splash #primary-homepage-cta p.last-paragraph {
  margin-bottom: 3rem;
}
.hero .section-content .splash #primary-homepage-cta img.logo-small {
  width: 198px;
  padding-bottom: 8px;
}
.hero .section-content .splash #primary-homepage-cta .hero-cta-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  transition: all 0.4s ease;
  width: fit-content;
  row-gap: 1rem;
  column-gap: 1rem;
  margin-top: 1.5rem;
}
.hero .section-content .splash #primary-homepage-cta .hero-cta-wrap .btn.cta {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: center;
  align-content: center;
  color: #EAEAEA;
  border: 1px solid #925EEE;
  border-radius: 0.5rem;
  padding: 1rem;
}
.hero .section-content .splash #primary-homepage-cta .hero-cta-wrap .btn.cta img {
  width: 60px;
  max-height: 60px;
  margin-bottom: 0.25rem;
  transition: all 0.4s ease;
}
.hero .section-content .splash #primary-homepage-cta .hero-cta-wrap .btn.cta:hover {
  color: #C242B1;
  border-color: #9C2FBA;
}
.hero .section-content .splash #primary-homepage-cta .hero-cta-wrap .btn.cta:hover img {
  opacity: 0.6;
}
.hero .section-content .video-wrap {
  width: 50%;
}
.hero .section-content .video-wrap .hero-gif {
  max-width: 100%;
  border-radius: 4px;
}

.form-wrapper {
  background-color: #010306;
  border-radius: 4px;
  padding: 2rem;
}
.form-wrapper #logo {
  max-width: 95%;
  margin: auto;
}

.primary-cta {
  border-radius: 33px;
  padding: 1rem 3rem;
  font-weight: 600;
  font-size: 1.125rem;
}

.cta-second-line {
  font-style: italic;
  font-weight: normal;
  font-size: 1rem;
  margin-top: -0.3rem;
  display: block;
}

.modal-dialog {
  border: solid 1px #C242B1;
  border-radius: 4px;
}

.modal-content {
  background-color: #010306;
  color: white;
}

.modal-footer {
  background-color: #010306;
  border-top: solid #010306 1px;
  color: white;
}
.modal-footer .btn {
  color: white;
}

.marketing {
  text-align: center;
  margin-bottom: 0px;
  padding: 6rem;
}
.marketing ol {
  text-align: left;
}

.h3-second-line {
  margin-top: 3rem;
}

.product-feature-list {
  margin: 0 2rem;
}

.inline-feature-cta {
  display: flex;
}

.sm-logo {
  padding: 0;
  margin: 0 0.5rem;
  max-width: 4rem;
}

.product-feature-container {
  background-color: #1a133f;
  display: flex;
  flex-direction: row;
  width: 100%;
  flex-basis: auto;
  margin-bottom: 3rem;
}

.feature-visual-content {
  background-color: #211a46;
  border-radius: 0.25rem 0rem 0rem 0.25rem;
}

.feature-description {
  text-align: left;
  padding: 3rem;
}
.feature-description h4 {
  color: #925EEE;
}

.feature-illustration {
  background-color: #010306;
  height: 300px;
  width: 500px;
  max-width: 500px;
  margin: 3rem;
  border-radius: 5px;
  filter: drop-shadow(5px 5px 4px #000);
  flex-grow: 1;
  align-self: center;
}
.feature-illustration.runtime-in-ide-feature {
  background-image: url(/assets/img/runtime-in-ide.gif);
  background-position: -10px;
  background-size: cover;
}
.feature-illustration.all-your-packages {
  background-image: url(/assets/img/one-command.gif);
  background-size: cover;
}
.feature-illustration.findings-in-dev {
  background-image: url(/assets/img/findings-in-dev.gif);
  background-size: cover;
}
.feature-illustration.auto-open-api {
  background-image: url(/assets/img/auto-open-api.gif);
  background-size: cover;
  background-position: -10px;
}

.feature-description {
  background-color: #07041a;
  flex-grow: 3;
}

.second-button {
  margin-left: 1rem;
}

.teams.features-section {
  background-color: #0c082a;
  padding-top: 3rem;
}

.feature-card {
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  background: #07041a;
}

.community {
  display: flex;
  align-items: center;
  justify-content: center;
}

.callout {
  max-width: 100%;
  margin: auto;
  margin-bottom: 3rem;
}

.visualizations h3 {
  font-size: 2rem;
}
.visualizations .feature-callout {
  grid-template-columns: 1fr;
  row-gap: 6rem;
}
.visualizations .feature-callout li.feature {
  padding: 2.5rem;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.visualizations .feature-callout li.feature video {
  margin-bottom: 0rem;
  width: 100%;
  border-radius: 4px;
}
.visualizations .feature-callout li.feature img {
  width: 50%;
  border-radius: 4px;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
}
.visualizations .feature-callout li.feature .video {
  width: 50%;
}
.visualizations .feature-callout li.feature .feature-content {
  margin-left: 3rem;
  width: 50%;
}
.visualizations .feature-callout li.feature .feature-content ul {
  display: block;
  list-style-type: disc;
  list-style-position: outside;
  padding: 0 0 0 1rem;
  margin-bottom: 1.5rem;
}
.visualizations .feature-callout a {
  transition: all 0.3s ease;
  color: #e3e5e8;
  background: linear-gradient(180deg, rgba(84, 10, 159, 0.4) 33%, rgba(69, 98, 177, 0.4) 130%);
  display: block;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
  margin-top: 1rem;
}
.visualizations .feature-callout a:hover {
  text-decoration: none;
  box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.5);
}
.visualizations .feature-callout a:hover .cta {
  opacity: 0.7;
}
.visualizations .cta {
  color: #e3e5e8;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  background: linear-gradient(90deg, rgb(255, 7, 170) 0%, rgb(156, 47, 186) 100%);
}

.slack-cta .logo-small {
  width: 100px;
}

.community {
  grid-column: span 12;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 3rem;
}
.community .slack-cta a {
  display: flex;
  flex-direction: row;
  align-items: center;
  transition: all 0.3s ease;
  color: white;
}
.community .slack-cta a img {
  margin-right: 1.5rem;
}
.community .slack-cta a h3 {
  transition: all 0.3s ease;
}
.community .slack-cta a:hover h3 {
  color: #bd5fd7;
  text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
}
.community .slack-cta a:hover img {
  opacity: 0.65;
}
.community .tagline {
  grid-column: span 12;
  padding: 2rem;
  margin: 1.5rem 0rem;
  text-align: center;
  color: #e3e5e8;
  font-size: 1.2rem;
}

#tagline {
  max-width: 90%;
  margin: auto;
  line-height: 1.5rem;
}

.hbspt-form .hs-form-required {
  display: none;
}
.hbspt-form .hs_choose {
  margin-bottom: 1rem;
}
.hbspt-form .hs_choose label {
  display: none;
}
.hbspt-form:focus {
  outline: none;
}
.hbspt-form .hs_recaptcha .input {
  border: 0;
  margin: auto;
}
.hbspt-form .hs_recaptcha .input .grecaptcha-badge {
  margin-bottom: 1em;
  margin-top: 1rem;
}
.hbspt-form .input {
  border: 1px solid rgba(220, 188, 209, 0.2);
  border-radius: 4px;
}
.hbspt-form .input input {
  width: 100% !important;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: #e3e5e8;
  padding: 0.5rem 1rem 0.5rem 0.5rem;
  height: 44px;
}
.hbspt-form .input input::-webkit-input-placeholder {
  color: white;
}
.hbspt-form .input input:focus {
  outline: none;
  border: 0;
}
.hbspt-form .input select {
  width: 100% !important;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: #e3e5e8;
  padding: 0 0.5rem;
  height: 44px;
  background: url("data:image/svg+xml,%3Csvg width='15' height='20' viewBox='0 0 15 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.20249 11.6076H13.0947C14.1639 11.6076 14.6986 12.9088 13.9441 13.6674L7.99801 19.6458C7.52832 20.1181 6.76882 20.1181 6.30413 19.6458L0.353051 13.6674C-0.401451 12.9088 0.133196 11.6076 1.20249 11.6076ZM13.9441 6.33258L7.99801 0.354182C7.52832 -0.118061 6.76882 -0.118061 6.30413 0.354182L0.353051 6.33258C-0.401451 7.09118 0.133196 8.39236 1.20249 8.39236H13.0947C14.1639 8.39236 14.6986 7.09118 13.9441 6.33258Z' fill='%23EAEAEA'/%3E%3C/svg%3E") no-repeat 98% 50%;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}
.hbspt-form .input select option {
  background-color: #010306;
  padding: 0.5rem;
}
.hbspt-form .input select:focus {
  outline: none;
  border: 0;
}
.hbspt-form .input textarea {
  width: 100% !important;
  background: transparent;
  border: 0;
  padding: 1rem;
  color: #e3e5e8;
}
.hbspt-form .input textarea:focus {
  outline: none;
  border: 0;
}
.hbspt-form .input textarea::placeholder {
  color: #e3e5e8;
  opacity: 1;
}
.hbspt-form input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #010306 inset;
}
.hbspt-form label {
  margin: 0;
}
.hbspt-form .submitted-message {
  color: rgb(113, 149, 41);
  text-align: center;
}
.hbspt-form .hs_submit input {
  background-color: #C242B1;
  border-radius: 4px;
  color: #e3e5e8;
  border: none;
  padding: 0.2rem 3rem;
  width: 25%;
  margin: 0.5rem 0 0 0;
  float: left;
  transition: all 0.3s ease;
}
.hbspt-form .hs_submit input:hover {
  background-color: #8b2d7e;
}

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 0;
  -webkit-text-fill-color: #e3e5e8;
  -webkit-box-shadow: 0 0 0px 1000px #010306 inset;
  transition: background-color 5000s ease-in-out 0s;
}

.actions {
  text-align: center;
}

.hs-error-msgs {
  list-style-type: none;
  padding: 0;
  color: rgb(196, 19, 92);
}

.illo svg {
  width: unset;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Internet Explorer */
@-ms-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (max-width: 1500px) {
  #home-body .features-section-row {
    padding: 0 2rem;
  }
}
@media (max-width: 1350px) {
  .hero .section-content {
    gap: 2rem;
  }
  .hero .section-content .splash {
    width: 55%;
  }
  .hero .section-content .splash h1,
  .hero .section-content .splash .scroll {
    font-size: 5rem;
  }
  .hero .section-content .splash h1 br {
    display: none;
  }
  .hero .section-content .splash .scroll-wrap {
    margin-bottom: 2rem;
  }
}
@media (max-width: 1200px) {
  .hero .section-content .hero-graphic img {
    width: 100%;
  }
  .hero .section-content .splash h1 {
    font-size: 4rem;
    margin-bottom: 1rem;
    line-height: 4.5rem;
  }
  .update-banner {
    margin-bottom: 2rem;
  }
  .update-banner a {
    background-image: url(../img/appland_banner_v_2.svg);
  }
  section.highlighted .section-content.split img {
    max-width: 60%;
  }
}
@media (max-width: 1000px) {
  section.highlighted.split .highlight-wrap {
    flex-direction: column;
  }
  .highlighted {
    padding: 5rem 3rem;
  }
  .highlighted .content-wrap {
    margin: 0;
    max-width: 100%;
  }
  .feature-callout ul li.vert {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
  }
  .feature-callout ul li.vert .logos {
    margin-top: 0;
  }
}
@media (max-width: 992px) {
  .talk-to-an-expert ul li {
    margin-bottom: 0;
  }
  .product-feature-list {
    margin: 0rem 1rem;
  }
  .product-feature-container {
    flex-direction: column;
    background-color: #07041a;
  }
  .product-feature-container .feature-illustration {
    margin: 3rem auto;
    max-width: 95%;
  }
  .product-feature-container .feature-illustration.all-your-packages {
    background-repeat: no-repeat;
    background-size: 93%;
  }
  #home-body .enterprise.features-section {
    margin-bottom: 2rem;
  }
  section.feature-center .content-wrap {
    max-width: 100%;
  }
  section.feature-center .content-wrap ul li {
    margin-bottom: 0;
  }
  div.container.home {
    width: 100%;
  }
  .container .promo-form {
    width: 100%;
  }
  .hero {
    background-size: contain;
    background-repeat: no-repeat;
  }
  .hero .section-content {
    padding: 2rem;
    padding-top: 0;
    flex-direction: column;
  }
  .hero .section-content .animated {
    height: 7rem;
    margin-bottom: 2rem;
  }
  .hero .section-content .animated .scroll {
    font-size: 6rem;
  }
  .hero .section-content .animated .scroll .scroll-item {
    margin-bottom: 4rem;
  }
  .hero .section-content .hero-graphic {
    width: 80%;
    margin: 0 auto;
    text-align: center;
  }
  .hero .section-content .hero-graphic img {
    width: 80%;
  }
  .hero .section-content .splash {
    width: 100%;
    padding: 0 3rem;
    margin-top: 2rem;
    text-align: center;
  }
  .hero .section-content .splash p {
    margin: 2rem auto;
  }
  .hero .section-content .splash ul {
    text-align: left;
  }
  .hero .section-content .splash h1 {
    font-size: 6rem;
    line-height: 6.5rem;
    margin-bottom: 1rem;
  }
  .hero .section-content .splash h2 {
    margin: 0 auto;
    margin-bottom: 1rem;
  }
  .hero .section-content .splash .scroll-wrap {
    margin-bottom: 4rem;
  }
  .hero .section-content .splash .scroll-wrap .scroll {
    font-size: 6rem;
    height: 105px;
  }
  .hero .section-content .splash .scroll-wrap .scroll .scroll-item {
    line-height: 95px;
  }
  .hero .section-content .splash .split-cta {
    justify-content: center;
  }
  .hero .section-content .splash .list-container {
    padding: 1rem;
  }
  .hero .section-content .splash #primary-homepage-cta {
    margin: 0 auto;
    padding: 0 4rem;
    margin-bottom: 3rem;
  }
  .hero .section-content .splash #primary-homepage-cta a {
    font-size: 1rem;
    padding: 0.75rem 1rem;
  }
  .hero .section-content .splash #primary-homepage-cta .hero-cta-wrap {
    width: fit-content;
    margin: 0 auto;
    margin-top: 1.5rem;
  }
  .hero .section-content .splash #primary-homepage-cta p {
    max-width: unset;
  }
  .hero .section-content .splash #primary-homepage-cta p.home-page-text-block {
    margin-left: auto;
    margin-right: auto;
  }
  .hero .section-content .video-wrap {
    width: 100%;
  }
  .marketing {
    padding: 3rem;
  }
  .visualizations .feature-callout li.feature {
    flex-direction: column;
  }
  .visualizations .feature-callout li.feature img {
    width: 100%;
  }
  .visualizations .feature-callout li.feature .feature-content {
    width: 100%;
    margin-top: 2rem;
  }
  .community {
    max-width: 90%;
    margin: 3rem auto;
  }
}
@media (min-width: 800px) {
  .feature-illustration {
    min-width: 500px;
  }
}
@media (max-width: 840px) {
  .hero .section-content .splash {
    padding: 0;
  }
  .hero .section-content .splash h1 {
    font-size: 4.75rem;
    margin-bottom: 0.5rem;
    line-height: 5rem;
  }
  .hero .section-content .splash .scroll-wrap .scroll {
    height: 90px;
  }
  .hero .section-content .splash .scroll-wrap .scroll .scroll-item {
    font-size: 5rem;
    line-height: 80px;
  }
  .update-banner a {
    background-image: url(../img/appland_banner_750.svg);
  }
  #home-body .features-section-row .three-col {
    flex-direction: column;
  }
}
@media (max-width: 800px) {
  .community .slack-cta a {
    gap: 1rem;
  }
  .community .slack-cta a h3 {
    font-size: 1.5rem;
  }
  .community .slack-cta .logo-small {
    width: 80px;
    margin: 0;
  }
}
@media (max-width: 750px) {
  .download .section-content h1 br {
    display: none;
  }
  .hero .section-content .hero-graphic {
    padding-top: 4rem;
  }
  .hero .section-content .splash {
    padding: 0;
  }
  .hero .section-content .splash h1 {
    font-size: 4.5rem;
    margin-bottom: 0;
    line-height: 5rem;
  }
  .hero .section-content .splash p br {
    display: none;
  }
  .hero .section-content .splash .scroll-wrap {
    margin-bottom: 3.5rem;
  }
  .hero .section-content .splash .scroll-wrap .scroll {
    height: 88px;
  }
  .hero .section-content .splash .scroll-wrap .scroll .scroll-item {
    font-size: 4.5rem;
    line-height: 88px;
  }
  .hero .section-content .splash #primary-homepage-cta {
    margin-top: 1rem;
    padding: 0 2rem;
  }
  .hero .section-content .splash #primary-homepage-cta h2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 2.3rem;
  }
  .hero .section-content .splash #primary-homepage-cta h2 img {
    margin-bottom: 0.75rem;
  }
  .hero .section-content .splash #primary-homepage-cta span,
  .hero .section-content .splash #primary-homepage-cta br {
    display: none;
  }
}
@media (max-width: 650px) {
  .hero .section-content .splash h1 {
    font-size: 4rem;
    line-height: 4.5rem;
    margin-bottom: 0.25rem;
  }
  .hero .section-content .splash p {
    max-width: 100%;
  }
  .hero .section-content .splash #primary-homepage-cta {
    padding: 0 2rem;
  }
  .hero .section-content .splash #primary-homepage-cta h2 {
    font-size: 1.85rem;
    line-height: 2.2rem;
  }
}
@media (max-width: 550px) {
  .hero .section-content .hero-graphic {
    padding: 0.5rem;
    width: 90%;
  }
  .hero .section-content .splash h1 {
    font-size: 3.5rem;
    line-height: 4rem;
    margin-bottom: 0;
  }
  .hero .section-content .splash p {
    margin: 1.5rem auto;
  }
  .hero .section-content .splash #primary-homepage-cta .hero-cta-wrap {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    margin-bottom: 2.5rem;
  }
  .hero .section-content .splash #primary-homepage-cta .hero-cta-wrap .btn.cta img {
    width: 45px;
    margin-right: 1rem;
  }
  .community .slack-cta {
    padding: 0 2rem;
  }
  .community .slack-cta a {
    gap: 1rem;
  }
  .community .slack-cta a h3 {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
  .community .slack-cta .logo-small {
    width: 50px;
  }
}
@media (max-width: 450px) {
  .hero .section-content .splash #primary-homepage-cta .hero-cta-wrap {
    margin-bottom: 1rem;
    grid-template-columns: 1fr;
  }
  .hero .section-content .splash #primary-homepage-cta .hero-cta-wrap .btn.cta {
    padding: 1rem 3rem;
  }
}
@media (max-width: 420px) {
  .hero .section-content .splash h1 {
    font-size: 3rem;
    line-height: 3.25rem;
  }
  .hero .section-content .splash .split-cta {
    flex-direction: column;
    padding: 0 1rem;
  }
}
@media (max-width: 400px) {
  .hero .section-content .splash #primary-homepage-cta {
    padding: 0;
    margin-bottom: 0;
  }
  .hero .section-content .splash #primary-homepage-cta p.home-page-text-block {
    margin: 0 0.2rem;
  }
  .hero .section-content .splash #primary-homepage-cta img.logo-small {
    width: 160px;
  }
  .hero .section-content .splash #primary-homepage-cta h2 {
    font-size: 1.5rem;
    line-height: 2rem;
  }
  .hero .section-content .splash #primary-homepage-cta .hero-cta-wrap {
    margin-bottom: 1rem;
  }
}
section.product-detail {
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 2rem;
  min-height: 300px;
  margin-bottom: 4rem;
}
section.product-detail h2 {
  margin-bottom: 1.75rem;
}
section.product-detail .section-content {
  width: 100%;
  max-width: 1060px;
  border-radius: 1rem;
  display: flex;
  flex-direction: row;
  gap: 2.5rem;
}
@media (max-width: 1060px) {
  section.product-detail .section-content {
    flex-direction: column;
    gap: 2rem;
  }
}
section.product-detail .section-content video,
section.product-detail .section-content image {
  max-width: 600px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  align-self: center;
}
@media (max-width: 599px) {
  section.product-detail .section-content video,
  section.product-detail .section-content image {
    max-width: 100%;
  }
}
section.product-detail .comparison-table {
  border-radius: 8px;
  overflow: hidden;
  margin: 0 auto;
  /* ▸ Auto-insert an icon before every status cell */
  /* Mobile stacking */
}
section.product-detail .comparison-table table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 8px;
}
section.product-detail .comparison-table table th,
section.product-detail .comparison-table table td {
  padding: 1rem 1.25rem;
  text-align: left;
  line-height: 1.4;
}
section.product-detail .comparison-table table thead th {
  background: rgba(146, 94, 239, 0.2);
  font-weight: 600;
}
section.product-detail .comparison-table table tbody tr:nth-child(odd) {
  background: rgba(146, 94, 239, 0.05);
}
section.product-detail .comparison-table table tbody tr:nth-child(even) {
  background: rgba(146, 94, 239, 0.1);
}
section.product-detail .comparison-table .good::before,
section.product-detail .comparison-table .warn::before,
section.product-detail .comparison-table .bad::before {
  font-family: "Material Icons";
  font-size: 18px;
  vertical-align: -3px;
  margin-right: 0.4rem;
  display: inline-block;
}
section.product-detail .comparison-table .good::before {
  color: #4caf50;
  content: "check_circle";
}
section.product-detail .comparison-table .warn::before {
  color: #ffb74d;
  content: "error_outline";
}
section.product-detail .comparison-table .bad::before {
  color: #ef5350;
  content: "highlight_off";
}
@media (max-width: 640px) {
  section.product-detail .comparison-table .appmap::before,
  section.product-detail .comparison-table .other::before {
    display: block;
    min-width: 4.2em;
    font-weight: bold;
  }
  section.product-detail .comparison-table .appmap::before {
    content: "AppMap";
  }
  section.product-detail .comparison-table .other::before {
    content: "Other";
  }
  section.product-detail .comparison-table table,
  section.product-detail .comparison-table thead {
    display: block;
  }
  section.product-detail .comparison-table thead {
    display: none;
  }
  section.product-detail .comparison-table tr {
    display: block;
    margin-bottom: 1.25rem;
    border-radius: 8px;
    overflow: hidden;
  }
  section.product-detail .comparison-table td {
    display: flex;
    padding: 0.6rem 1rem;
    flex-direction: row;
    gap: 1em;
  }
  section.product-detail .comparison-table td:first-child {
    background: rgba(146, 94, 239, 0.2);
    font-weight: 600;
    border-bottom: 1px solid rgba(146, 94, 239, 0.1);
  }
}
section.product-detail .review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  max-width: 1060px;
  margin: auto;
  gap: 1.2rem;
  margin-top: 2rem;
}
section.product-detail .review-item {
  background-color: rgba(146, 94, 238, 0.1);
  padding: 1.5em 1em;
  border-radius: 12px;
  text-align: left;
  color: #f0f0f0;
  display: flex;
  flex-direction: row;
  gap: 1em;
  position: relative;
}
section.product-detail .review-item.runtime-edge {
  border: 2px solid #59339b;
}
section.product-detail .review-item .runtime-pill {
  position: absolute;
  display: flex;
  top: -10px;
  right: -10px;
  font-size: 0.55rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: #100c1c;
  color: #925eee;
  padding: 0 4px;
  border-radius: 4px;
  border: 2px solid #925eee;
  font-weight: 600;
}
section.product-detail .review-item .runtime-pill::before {
  content: "bolt";
  font-size: 2em;
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  align-content: space-evenly;
}
section.product-detail .review-item .runtime-pill::after {
  content: "Runtime Enhanced";
}
section.product-detail .review-item h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: bold;
}
section.product-detail .review-item p {
  font-size: 0.95rem;
  line-height: 1.4;
  margin: 0;
  margin-top: 0.5em;
}
section.product-detail .content {
  display: flex;
  flex-direction: column;
}
section.product-detail .icon {
  font-size: 2.4rem;
  color: #925eee;
}
section.product-detail .icon.correct::before {
  content: "check_circle";
}
section.product-detail .icon.quality::before {
  content: "code";
}
section.product-detail .icon.security::before {
  content: "security";
}
section.product-detail .icon.runtime::before {
  content: "bug_report";
}
section.product-detail .icon.testing::before {
  content: "fact_check";
}
section.product-detail .icon.compatibility::before {
  content: "compare_arrows";
}
section.product-detail .icon.performance::before {
  content: "speed";
}
section.product-detail .icon.docs::before {
  content: "menu_book";
}
section.product-detail .icon.design::before {
  content: "layers";
}

section.product-detail-footer {
  margin: 3rem auto;
}

.h1-highlight {
  color: #ff09aa;
}

.hero {
  width: 100%;
  padding: 4rem 0rem 8rem 0rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  background-image: url(/assets/img/hero-bg-map.svg);
  background-repeat: no-repeat;
  background-size: cover;
}
.hero a.btn.hero-cta {
  background-color: rgba(18, 10, 25, 0.4509803922);
  border: 2px solid #926dd4;
  border-radius: 0.5rem;
  padding: 1rem;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  color: #e3e5e8;
  width: 300px;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  text-align: left;
}
.hero a.btn.hero-cta img {
  width: 50px;
  height: 50px;
}
.hero a.btn.hero-cta:hover {
  border-color: rgba(227, 229, 232, 0.8);
  background-color: rgba(1, 0, 1, 0.9882352941);
  color: rgba(227, 229, 232, 0.8);
}
.hero a.btn.hero-cta.cta-slack {
  background-color: #542e76;
}
.hero a.btn.hero-cta.cta-slack:hover {
  border-color: rgba(227, 229, 232, 0.8);
  background-color: rgba(1, 0, 1, 0.9882352941);
}
.hero .hero-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 1000px;
}
.hero h1 {
  font-size: 3.75rem;
  margin-bottom: 0;
  color: #e3e5e8;
  font-family: "Open Sans", sans-serif;
  font-weight: 800;
  text-align: center;
}
.hero h1 br {
  display: none;
}
.hero .subheading {
  color: #B297AE;
  font-size: 1.8rem;
  font-weight: 300;
  line-height: 2.3rem;
  margin: 0;
  text-align: center;
}
.hero .hero-cta {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 2rem;
  list-style-type: none;
  margin-top: 1rem;
  padding: 0;
}
.hero .ide-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 0.5rem;
  width: 100%;
  max-width: 1000px;
}
.hero .ide-wrap #heroTabsContent {
  box-shadow: 0px 0px 13px 6px rgba(0, 0, 0, 0.08);
}
.hero .ide-wrap .tab-wrap {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  width: 100%;
}
.hero .ide-wrap .tab-wrap .btn-replay {
  align-items: center;
  color: #808b98;
  display: flex;
  flex-direction: row;
  font-size: 0.8rem;
  gap: 0.5rem;
  margin-right: 1rem;
}
.hero .ide-wrap .tab-wrap .btn-replay.fade:not(.show) {
  pointer-events: none;
}
.hero .ide-wrap .nav-tabs {
  border-bottom: 0;
  padding-left: 1rem;
}
.hero .ide-wrap .nav-tabs .nav-link {
  background-color: #140d22;
  border: 0;
  color: rgba(143, 129, 212, 0.7019607843);
  margin-right: 0.5rem;
  padding: 0.1rem 0.8rem;
  font-size: 0.9rem;
  border-radius: 0.5rem 0.5rem 0 0;
}
.hero .ide-wrap .nav-tabs .nav-link br {
  display: none;
}
.hero .ide-wrap .nav-tabs .nav-link.active {
  color: #e3e5e8;
  background-color: #4C5671;
}
.hero .ide-wrap .ide-illo {
  background-color: #070E17;
  border: 2px solid #4C5671;
  border-radius: 0.5rem;
  display: flex;
  font-size: 16px;
  font-weight: 300;
  width: 100%;
  height: 525px;
  width: 100%;
  opacity: 100%;
  z-index: 2;
  white-space: nowrap;
  flex-direction: column;
  overflow-y: hidden;
}
.hero .ide-wrap .ide-illo .fade-in.security {
  animation: fade-in 1.5s 6s ease-in forwards;
}
.hero .ide-wrap .ide-illo .fade-in.performance {
  animation: fade-in 1.5s 6.5s ease-in forwards;
}
.hero .ide-wrap .ide-illo .fade-in.visualization {
  animation: fade-in 1.5s 6.5s ease-in forwards;
}
@keyframes fade-in {
  from {
    opacity: 0%;
  }
  to {
    opacity: 100%;
  }
}
.hero .ide-wrap .ide-illo .code-area {
  background-color: #171e2f;
  border-radius: 0.5rem 0.5rem 0 0;
  width: 100%;
  height: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.hero .ide-wrap .ide-illo .code-area .code-block {
  color: rgba(255, 255, 255, 0.6);
  padding: 2rem 1rem 1rem 1rem;
}
.hero .ide-wrap .ide-illo .code-area .code-block pre {
  margin: 0;
  line-height: 2rem;
  color: #e3e5e8;
}
.hero .ide-wrap .ide-illo .code-area .code-block ol {
  color: #7490D7;
  font-family: monospace;
  list-style-type: none;
  padding: 0;
  margin-bottom: 0;
  margin-top: -1rem;
}
.hero .ide-wrap .ide-illo .code-area .code-block ol > li {
  counter-increment: customlistcounter;
}
.hero .ide-wrap .ide-illo .code-area .code-block ol > li:before {
  content: counter(customlistcounter) " ";
  float: left;
  color: #808b98;
  width: 2.25em;
}
.hero .ide-wrap .ide-illo .code-area .code-block ol li p {
  margin: 0;
}
.hero .ide-wrap .ide-illo .code-area .code-block ol li .one-tab {
  padding-left: 2rem;
}
.hero .ide-wrap .ide-illo .code-area .code-block ol li .two-tab {
  padding-left: 3rem;
}
.hero .ide-wrap .ide-illo .code-area .code-block ol li .three-tab {
  padding-left: 4rem;
}
.hero .ide-wrap .ide-illo .code-area .code-block ol li .four-tab {
  padding-left: 5rem;
}
.hero .ide-wrap .ide-illo .code-area .code-block ol li .five-tab {
  padding-left: 6rem;
}
.hero .ide-wrap .ide-illo .code-area .code-block ol li .six-tab {
  padding-left: 7rem;
}
.hero .ide-wrap .ide-illo .code-area .code-block ol li img {
  margin-left: 0.25rem;
  opacity: 0%;
}
.hero .ide-wrap .ide-illo .code-area .code-block ol li .color-orange {
  color: #936C5D;
}
.hero .ide-wrap .ide-illo .code-area .code-block ol li .color-white {
  color: #e3e5e8;
}
.hero .ide-wrap .ide-illo .code-area .code-block ol li .color-blue {
  color: #7490D7;
}
.hero .ide-wrap .ide-illo .code-area .code-block ol li .color-purple {
  color: #925EEE;
}
.hero .ide-wrap .ide-illo .code-area .code-block ol li .color-yellow {
  color: #ddb410;
}
.hero .ide-wrap .ide-illo .code-area .code-block ol li.comment {
  color: #808b98;
}
.hero .ide-wrap .ide-illo .code-area .code-block ol li span.teal {
  color: #6FDDD6;
}
.hero .ide-wrap .ide-illo .code-area .code-block ol li .squiggle {
  margin: -0.4rem 0 -2.5rem 2.5rem;
  padding-left: 2.75rem;
  width: 32rem;
  height: 0.5rem;
  float: left;
}
.hero .ide-wrap .ide-illo .code-area .code-block ol.squiggle img {
  margin-left: 2.5rem;
  width: 29rem;
  margin-top: -1.5rem;
}
.hero .ide-wrap .ide-illo .code-area .code-block ol:first-child {
  counter-reset: customlistcounter;
  counter-set: customlistcounter 44;
}
.hero .ide-wrap .ide-illo .code-area .code-block pre {
  counter-reset: line;
}
.hero .ide-wrap .ide-illo .code-area .code-block code {
  counter-increment: line;
}
.hero .ide-wrap .ide-illo .code-area .code-block .typewriter-container {
  display: inline-block;
  height: 1.1rem;
}
.hero .ide-wrap .ide-illo .code-area .code-block .typewriter-container #typewriter-security, .hero .ide-wrap .ide-illo .code-area .code-block .typewriter-container #typewriter-performance, .hero .ide-wrap .ide-illo .code-area .code-block .typewriter-container #typewriter-visualization {
  overflow: hidden;
  border-right: 0.15em solid transparent;
  width: 0;
  max-width: min-content;
  margin-right: 5px;
  float: left;
}
.hero .ide-wrap .ide-illo .code-area .code-block .typewriter-container .typewriter {
  animation: typing 4s steps(60, end) forwards, blink-caret 0.75s step-end 6;
}
.hero .ide-wrap .ide-illo .code-area .code-block .typewriter-container #typewriter-visualization {
  padding-left: 1.7rem;
  animation-duration: 1s;
  animation-delay: 1s;
}
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 93%;
  }
}
@keyframes blink-caret {
  from, to {
    border-color: transparent;
  }
  50% {
    border-color: orange;
  }
}
.hero .ide-wrap .ide-illo .code-area .code-block.security .fade-in {
  animation: fade-in 1s 5s ease-in forwards;
}
.hero .ide-wrap .ide-illo .code-area .code-block.performance ol:first-child {
  counter-set: customlistcounter 0;
}
.hero .ide-wrap .ide-illo .code-area .code-block.performance ol li .squiggle {
  margin: 1.4rem 0 -2.2rem -15.5rem;
  padding-left: 0;
  width: 15rem;
  height: 0.5rem;
  float: left;
}
.hero .ide-wrap .ide-illo .code-area .code-block.performance .fade-in {
  animation: fade-in 1s 6s ease-in forwards;
}
.hero .ide-wrap .ide-illo .code-area .code-block.visualization ol {
  color: unset;
  margin-top: -2rem;
}
.hero .ide-wrap .ide-illo .code-area .code-block.visualization ol:first-child {
  counter-set: customlistcounter 9;
}
.hero .ide-wrap .ide-illo .code-area .code-block.visualization ol li .squiggle {
  margin: 1.4rem 0 -2.2rem -15.5rem;
  padding-left: 3rem;
  width: 15rem;
  height: 0.5rem;
  float: left;
}
.hero .ide-wrap .ide-illo .code-area .code-block.visualization .fade-in {
  animation: fade-in 1s 3s ease-in forwards;
}
.hero .ide-wrap .ide-illo .code-area .code-block.visualization .swiper-container .swiper {
  margin-top: 2rem;
}
.hero .ide-wrap .ide-illo .code-area .code-block.visualization .swiper-container .progress-bar {
  animation: progress-bar 1s 2.5s steps(100, end);
}
.hero .ide-wrap .ide-illo .code-area code:before {
  content: counter(line);
  margin-right: 0.25rem;
  color: #808b98;
  -webkit-user-select: none;
}
.hero .ide-wrap .ide-illo .problems {
  background-color: #070E17;
  border-radius: 0 0 0.5rem 0.5rem;
  padding: 0 2rem;
  position: relative;
  font-size: 17px;
  letter-spacing: 1px;
  height: 293px;
}
.hero .ide-wrap .ide-illo .problems .swiper-container {
  width: 100%;
}
.hero .ide-wrap .ide-illo .problems .swiper-container .swiper {
  width: 0;
  height: 6px;
  border-radius: 0px;
  background: rgb(65, 145, 219);
  background: linear-gradient(90deg, rgb(65, 145, 219) 0%, rgb(190, 94, 198) 100%);
  z-index: 2;
}
.hero .ide-wrap .ide-illo .problems .swiper-container .progress-bar {
  animation: progress-bar 1.5s 4.5s linear forwards;
}
@keyframes progress-bar {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}
.hero .ide-wrap .ide-illo .problems #no-problems-security, .hero .ide-wrap .ide-illo .problems #no-problems-performance, .hero .ide-wrap .ide-illo .problems #no-problems-visualization {
  position: absolute;
  top: 50px;
  margin: 0;
  padding: 0;
}
.hero .ide-wrap .ide-illo .problems .badge {
  background-color: #4C5671;
  border-radius: 1rem;
  padding: 0.3rem 0.8rem;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0;
  color: #e3e5e8;
  font-size: 11px;
}
.hero .ide-wrap .ide-illo .problems ul.problems-list {
  list-style-type: none;
  padding: 0 0 1rem 0;
  margin-bottom: 0;
  font-size: 0.95rem;
  opacity: 0%;
}
.hero .ide-wrap .ide-illo .problems ul.problems-list li {
  color: #808b98;
  margin-bottom: 0;
}
.hero .ide-wrap .ide-illo .problems ul.problems-list li ul {
  list-style-type: none;
  padding: 0 0 0 3rem;
}
.hero .ide-wrap .ide-illo .problems ul.problems-list li.horiz-list {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: center;
}
.hero .ide-wrap .ide-illo .problems ul.problems-list li.highlight-yellow {
  color: #CBA74B;
  padding-left: 2rem;
  font-weight: 600;
}
.hero .ide-wrap .ide-illo .problems ul.problems-list li.highlighted {
  padding: unset;
  color: #e3e5e8;
  background: none;
}

.swiper-container {
  width: 100%;
  margin-bottom: 0.75rem;
  padding: 0 1rem;
}
.swiper-container .swiper {
  width: 0;
  height: 4px;
  border-radius: 2px;
  background: rgb(65, 145, 219);
  background: linear-gradient(90deg, rgb(65, 145, 219) 0%, rgb(190, 94, 198) 100%);
  z-index: 2;
}
.swiper-container .progress-bar.performance {
  animation: progress-bar 1.5s 4s steps(100, end);
}
.swiper-container .progress-bar.security {
  animation: progress-bar 1.5s 3s steps(100, end);
}
.swiper-container .progress-bar.visualization {
  animation: progress-bar 1.5s 4.5s steps(100, end);
}
@keyframes progress-bar {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

@media (max-width: 992px) {
  .hero {
    background-size: cover;
    background-position: center;
  }
  .hero h1 {
    font-size: 4.5rem;
  }
  .hero h1 br {
    display: unset;
  }
  .hero .ide-wrap .nav-tabs li {
    margin-bottom: 0;
  }
  .hero .subheading {
    font-size: 1.6rem;
  }
  .hero .code-block ol li {
    margin-bottom: 0;
  }
}
@media (max-width: 950px) {
  .hero .hero-cta {
    width: 100%;
  }
}
@media (max-width: 795px) {
  .hero .ide-wrap .ide-illo .problems {
    padding: 0 1rem;
  }
  .hero {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
  }
  .hero .hero-cta a.btn.hero-cta {
    padding: 0.5rem;
    flex-direction: column;
    width: unset;
    text-align: center;
  }
  .hero .hero-cta img {
    width: 80px;
    height: 80px;
  }
  .hero .hero-cta li {
    width: 40%;
  }
  .hero .hero-cta li a {
    height: 100%;
  }
  .hero .subheading br {
    display: none;
  }
  .hero .ide-illo {
    overflow-x: scroll;
  }
  .hero .ide-illo #code-area {
    width: 750px;
  }
}
@media (max-width: 715px) {
  .hero h1 {
    font-size: 4rem;
  }
  .hero .hero-cta {
    gap: 1.25rem;
    flex-direction: column;
  }
  .hero .hero-cta a.btn.hero-cta {
    flex-direction: row;
    gap: 0.5rem;
    margin: 0;
    text-align: left;
  }
  .hero .hero-cta li {
    width: 100%;
    margin-bottom: 0;
  }
  .hero .ide-illo #code-area {
    width: 680px;
  }
}
@media (max-width: 606px) {
  .hero .ide-wrap .nav-tabs {
    padding: 0;
    width: 95%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.5rem;
    margin-left: 0.5rem;
  }
  .hero .ide-wrap .nav-tabs .nav-link {
    width: 100%;
    background-color: #0a0710;
    line-height: 1.2rem;
    padding: 0.2rem 0.8rem;
  }
  .hero .ide-wrap .nav-tabs .nav-link br {
    display: unset;
  }
  .tab-wrap .btn-replay {
    margin: 0 1rem;
  }
  .tab-wrap .btn-replay span {
    display: none;
  }
  .hero .ide-wrap .ide-illo {
    height: 525px;
  }
  .hero .ide-wrap .ide-illo #code-area {
    height: 100%;
    width: 630px;
  }
  .hero .ide-wrap .ide-illo #code-area .code-block {
    padding: 1rem;
  }
  .hero .ide-wrap .ide-illo #code-area .code-block ol {
    font-size: 0.9rem;
    line-height: 1.5rem;
    margin: 0;
  }
  .hero .ide-wrap .ide-illo #code-area .code-block ol li .one-tab {
    padding-left: 1rem;
  }
  .hero .ide-wrap .ide-illo #code-area .code-block ol li .two-tab {
    padding-left: 2rem;
  }
  .hero .ide-wrap .ide-illo #code-area .code-block ol li .three-tab {
    padding-left: 3rem;
  }
  .hero .ide-wrap .ide-illo #code-area .code-block ol li .four-tab {
    padding-left: 4rem;
  }
  .hero .ide-wrap .ide-illo #code-area .code-block ol li .five-tab {
    padding-left: 4rem;
  }
  .hero .ide-wrap .ide-illo #code-area .code-block.visualization ol {
    margin-top: -1rem;
  }
  .hero .ide-wrap .ide-illo #code-area .code-block.performance ol li .squiggle {
    margin: 1.125rem 0 -2.2rem -15.5rem;
    padding-left: 1.5rem;
    width: 15rem;
    height: 0.5rem;
    float: left;
  }
  .hero .ide-wrap .ide-illo #code-area .code-block.security ol li .squiggle {
    margin: -0.3rem 0 -2.5rem 2.5rem;
    padding-left: 1.5rem;
    width: 28rem;
    height: 0.5rem;
    float: left;
  }
  .hero .ide-wrap .ide-illo .problems .badge, .hero .ide-wrap .ide-illo .problems .prob-badge {
    font-size: 12px;
  }
  .hero .ide-wrap .ide-illo .problems ul.problems-list {
    font-size: 0.9rem;
    line-height: 1.5rem;
  }
  .hero .ide-wrap .ide-illo .problems ul.problems-list li ul {
    padding-left: 2rem;
  }
  .hero .ide-wrap .ide-illo .problems ul.problems-list li.highlight-yellow {
    padding-left: 1rem;
  }
  .hero .ide-wrap .ide-illo #no-problems-security, .hero .ide-wrap .ide-illo #no-problems-performance {
    font-size: 0.9rem;
    line-height: 1.5rem;
  }
  .hero .ide-wrap .ide-illo #visualizations-map.visualizations img {
    width: unset;
    max-width: 700px;
    padding-bottom: 5rem;
  }
}
@media (max-width: 500px) {
  .hero h1 {
    font-size: 3.75rem;
  }
  .hero .subheading {
    font-size: 1.3rem;
    line-height: 2rem;
  }
}
.hero-new {
  background: linear-gradient(to top, #1c0349 0%, #000000 45%, black 33%);
  padding: 2rem 2rem;
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: row-reverse;
  gap: 3rem;
}
.hero-new .large-type-spacing {
  letter-spacing: -4px;
}
.hero-new video {
  position: absolute;
  width: 100vw;
  max-width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  object-fit: cover;
  z-index: 0;
}
.hero-new #accordion {
  display: none;
  width: 100%;
}
.hero-new #accordion .card {
  background-color: black;
}
.hero-new #accordion .card-header {
  background: black;
  color: white;
  border: solid 2px #7340d2;
  border-radius: 3px;
  height: 90px;
  font-family: "Courier New", Courier, monospace;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  align-content: center;
  line-height: 1.5rem;
}
.hero-new #accordion a {
  color: white;
}
.hero-new #accordion a:hover {
  text-decoration: none;
}
.hero-new #youtube-badge {
  position: relative;
  overflow: hidden;
  height: 88px;
  width: 300px;
  background: url("/assets/img/check-out-our-latest-videos.png") no-repeat;
  background-color: black;
  background-size: 100%;
  border: solid 1px #925dee;
  border-radius: 7px;
  margin-bottom: 2rem;
  margin-left: auto;
  transition: border-color 0.3s ease;
}
.hero-new #youtube-badge:hover {
  border-color: #d0b9f8; /* Lighten the border color on hover */
}
.hero-new .shine-sweep-effect::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150px;
  height: 100%;
  width: 150px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-20deg);
  animation: shine-sweep 2s linear 1;
}
@keyframes shine-sweep {
  0% {
    left: -150px;
  }
  100% {
    left: 100%;
  }
}
.hero-new .techcrunch {
  border: 2px solid #0a9e01;
  padding: 1.5rem;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.08);
  z-index: 9999;
  transition: all 0.3s ease;
}
.hero-new .techcrunch img {
  width: 200px;
}
.hero-new .techcrunch.badge {
  background-color: black;
  position: absolute;
  right: 32px;
  top: 38px;
  border-radius: 1rem;
}
.hero-new .techcrunch.badge:hover {
  border-color: #044d00;
}
.hero-new .techcrunch.banner {
  display: none;
  position: unset;
  width: 100%;
  background-color: #0a9e01;
  border-radius: 1rem;
  border: 2px solid #0a9e01;
  margin-bottom: 1.5rem;
  justify-items: center;
  justify-content: center;
}
.hero-new .techcrunch.banner img {
  width: 350px;
}
.hero-new .techcrunch.banner:hover {
  background-color: #0a9e01;
}
.hero-new .hero-wrap {
  width: 100%;
  max-width: 1200px;
  z-index: 1;
  padding-top: 2rem;
  align-content: center;
}
.hero-new .subheading-paragraphs {
  width: 100%;
  text-align: center;
}
.hero-new .subheading-paragraphs .navie-subhead {
  margin-bottom: 2rem;
  font-size: 1.45rem;
  line-height: 2rem;
}
.hero-new .subheading-paragraphs #navie-subhead-2 {
  padding: 1rem;
  background-color: #000;
  border-radius: 10px;
  font-family: monospace;
  color: #b286f6;
  font-size: 1.25rem;
  width: fit-content;
  margin: auto;
}
.hero-new #demo-container {
  height: fit-content;
  border-radius: 10px;
  max-width: 1000px;
}
.hero-new #demo-container img {
  max-width: 100%;
  width: 100%;
}
.hero-new h1 {
  font-size: 3.5rem;
  text-align: center;
  font-family: "Open Sans", sans-serif;
  color: #e3e5e8;
  font-weight: normal;
  line-height: 4rem;
  margin-bottom: 1rem;
}
.hero-new h1.navie-heading {
  font-size: 2.5rem;
  line-height: 2.5rem;
  color: #925EEE;
}
.hero-new h1.navie-heading:first-child {
  color: #2483d8;
}
.hero-new #meet-navie-button {
  padding: 1rem;
}
.hero-new #book-demo-button {
  padding: 1rem;
}
.hero-new .loom-video {
  width: 100%;
  height: 100%;
  max-width: 800px;
  margin-bottom: 3rem;
  margin-left: 1rem;
}
.hero-new .hero-cta-wrap {
  display: flex;
  gap: 1rem;
  z-index: 2;
  margin-bottom: 1.5rem;
  text-align: center;
}
.hero-new .hero-cta-wrap p {
  flex: 2;
  font-size: 1.25rem;
  max-width: 900px;
  margin: 2rem auto 0 auto;
  line-height: 2rem;
}
.hero-new .hero-cta-wrap .hero-cta {
  align-items: center;
  gap: 1rem;
  padding: 0;
  margin: 0;
}
.hero-new .hero-cta-wrap .hero-cta .btn-text {
  font-weight: bold;
}
.hero-new .hero-cta-wrap .hero-cta li {
  border-radius: 3rem;
  background-color: #c242b1;
  border: 1px solid #e3e5e8;
  padding: 1rem 2.5rem;
  list-style-type: none;
  transition: all 0.3s ease;
}
.hero-new .hero-cta-wrap .hero-cta li.get-appmap-cta {
  background-color: #C242B1;
  border: 0px;
}
.hero-new .hero-cta-wrap .hero-cta li.hideme {
  display: none;
}
.hero-new .hero-cta-wrap .hero-cta li:hover {
  background-color: #77276d;
  border-color: #77276d;
}
.hero-new .hero-cta-wrap .hero-cta li a {
  color: #e3e5e8;
  min-width: 210px;
}
.hero-new .hero-cta-wrap .hero-cta li a:focus {
  border: 0px;
}
.hero-new .hero-cta-wrap .hero-cta li img {
  width: 2.5rem;
}

.join-our-community {
  padding: 4rem;
  background-color: #C242B1;
}
.join-our-community .section-wrap {
  max-width: 1200px;
  margin: 0 auto;
}
.join-our-community h2 {
  font-family: "Open Sans", sans-serif;
  font-size: 5rem;
  font-weight: 800;
  line-height: 5rem;
  text-transform: uppercase;
}
.join-our-community .btn-dark {
  border-radius: 3rem;
  border: 2px solid #010306;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.08);
  padding: 1rem 2.5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  width: 100%;
  width: 300px;
}
.join-our-community .btn-dark img {
  width: 3rem;
}
.join-our-community .btn-dark:hover {
  background-color: #e3e5e8;
  color: #010306;
}
.join-our-community .cta-btn-wrap {
  text-align: left;
}
.join-our-community .cta-wrap {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  margin-top: 3rem;
}
.join-our-community .cta-wrap p {
  margin: 0;
  font-size: 1.2rem;
}
.join-our-community .cta-wrap .content-w-logo {
  display: flex;
  gap: 1rem;
  flex-direction: row;
  max-width: 650px;
}
.join-our-community .cta-wrap .content-w-logo img {
  width: 4rem;
}

#navie-homepage-examples {
  width: 100%;
  max-width: 1400px;
}
#navie-homepage-examples .nav-tabs {
  width: 100%;
  align-items: center;
  justify-content: space-evenly;
  border-bottom: 0px;
}
#navie-homepage-examples .nav-link {
  background: black;
  color: white;
  border: solid 2px #40207b;
  border-radius: 3px;
  width: 400px;
  max-width: 400px;
  height: 90px;
  margin-top: 1rem;
  font-family: "Courier New", Courier, monospace;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  align-content: center;
  line-height: 1.5rem;
}
#navie-homepage-examples .nav-link.active, #navie-homepage-examples .nav-link:hover {
  box-shadow: 0 0 8px 2px rgb(115, 64, 210); /* Purple glow effect */
  transition: box-shadow 0.3s ease-in-out; /* Smooth transition for glow effect */
  color: white;
  border: solid 2px #7340d2;
}
#navie-homepage-examples .nav-link.active .user-icon, #navie-homepage-examples .nav-link:hover .user-icon {
  filter: grayscale(0%);
}
#navie-homepage-examples .user-icon {
  width: 60px; /* Adjust based on your needs */
  height: 60px; /* Adjust based on your needs */
  border-radius: 50%; /* This makes the image round */
  margin-right: 8px; /* Optional: adds some space between the icon and the text */
  vertical-align: middle; /* Aligns the icon vertically with the text */
  align-self: center;
  filter: grayscale(50%);
}
#navie-homepage-examples .user-question {
  width: 80%;
  align-self: center;
}

.example-chat-image {
  width: 100%;
  max-width: 900px;
  border-radius: 10px; /* Adjust the radius according to your preference */
  box-shadow: 0px 0px 20px 12px rgba(0, 0, 0, 0.41); /* Creates a purple glow */
  /* Further adjustments may be needed to fit your site's design */
  border: 2px solid black;
}
.example-chat-image:hover {
  border: 2px solid #7340d2;
}

.example-chat-link {
  width: 100%;
  text-align: center;
}
.example-chat-link a {
  color: white;
  text-decoration: underline;
}

.parallax {
  padding: 0;
}
.parallax .para-slide {
  height: fit-content;
  padding: 5rem 4rem;
  background-color: #010306;
  border-top: 1px solid #C242B1;
  position: sticky;
  top: 0;
  overflow: hidden;
  transition: color 0.5s ease-in-out;
  display: flex;
  max-width: 100vw;
  max-height: 100vh;
}
.parallax .para-slide.disabled {
  color: rgba(221, 224, 228, 0.2588235294);
}
.parallax .para-slide.disabled a {
  color: rgba(221, 224, 228, 0.2588235294);
}
.parallax .para-slide .slide-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 2rem;
}
.parallax .para-slide h2 {
  text-transform: uppercase;
  font-weight: 800;
  font-size: 4rem;
  font-family: "Open Sans", sans-serif;
}
.parallax .para-slide .slide-content {
  width: 100%;
  max-width: 400px;
}
.parallax .para-slide .slide-content p {
  margin: 0 0 1.5rem 0;
}
.parallax .para-slide .slide-content.video {
  display: flex;
  max-width: 1000px;
  justify-content: center;
}
.parallax .para-slide .slide-content.video video {
  max-width: 100%;
  border-radius: 1rem;
  border: 1px solid #171e2f;
  max-height: 400px;
}
.parallax .para-slide .para-content {
  align-items: center;
  background-color: #050e1c;
  border-radius: 0.8rem;
  display: flex;
  width: 70%;
  max-width: 700px;
}

@media (max-height: 800px) and (orientation: landscape) {
  .parallax .para-slide {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
@media (max-height: 650px) and (orientation: landscape) {
  .parallax .para-slide {
    position: relative;
  }
  .parallax .para-slide .video video {
    max-height: 76vh;
  }
}
@media (max-height: 750px) {
  .parallax .video video {
    max-height: 50vh;
  }
}
@media (min-width: 1500px) {
  .hero-new h1 {
    margin-bottom: 2rem;
  }
  .hero-new .subheading-paragraphs #navie-subhead-1 {
    font-size: 1.45rem;
    line-height: 2.5rem;
  }
}
@media (max-width: 1500px) {
  .hero-new h1 {
    font-size: 3rem;
    line-height: 3.5rem;
  }
}
@media (max-width: 1400px) {
  .hero-new .hero-cta-wrap p {
    font-size: 1rem;
  }
}
@media (max-width: 1250px) {
  .hero-new .hero-cta-wrap p {
    font-size: 1.5rem;
  }
}
@media (max-width: 1200px) {
  .hero-new {
    flex-direction: column;
  }
  .hero-new .slide-content ul {
    columns: 2;
  }
  .hero-new .hero-wrap,
  .hero-new .hero-cta-wrap {
    text-align: center;
    align-items: center;
  }
  .hero-new .hero-wrap p,
  .hero-new .hero-cta-wrap p {
    margin-bottom: 0px;
  }
  .hero-new .hero-wrap #navie-subhead-1,
  .hero-new .hero-cta-wrap #navie-subhead-1 {
    font-size: 1.5rem;
  }
  .hero-new .loom-video {
    margin-right: 1rem;
  }
  .para-slide .slide-content h2 {
    font-size: 4rem;
  }
}
@media (max-width: 1000px) {
  .hero-new #accordion {
    display: block;
  }
  .hero-new #navie-homepage-examples {
    display: none;
  }
  .hero-new #nav-tabContent {
    display: none;
  }
  .hero-new .techcrunch {
    position: unset;
    border: none;
    box-shadow: none;
    padding: 0;
    z-index: 9999;
    width: 100%;
    padding: 1.5rem;
  }
  .hero-new .techcrunch img {
    width: 350px;
  }
  .hero-new .techcrunch.badge {
    display: none;
  }
  .hero-new .techcrunch.banner {
    display: flex;
  }
  .hero-new .hero-cta-wrap {
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 4rem;
  }
  .hero-new .hero-cta-wrap p {
    max-width: unset;
  }
  .hero-new #swebench-badge {
    margin-right: auto;
  }
  .parallax .para-slide {
    max-height: unset;
  }
  .parallax .para-slide .slide-wrap {
    flex-direction: column;
    gap: 0rem;
  }
  .parallax .para-slide .slide-wrap h2 {
    font-size: 3rem;
  }
  .parallax .para-slide .slide-wrap video {
    width: 100%;
    max-width: 800px;
  }
  .parallax .para-slide .slide-content {
    max-width: unset;
  }
  .parallax .para-slide .slide-content p {
    line-height: 1.5rem;
    margin: 0 0 0 0;
  }
}
@media (max-width: 840px) {
  .hero-new {
    padding-top: 1rem;
  }
  .join-our-community .cta-wrap {
    margin-top: 2rem;
    gap: 2rem;
  }
  .join-our-community .cta-wrap p {
    width: 100%;
  }
  .join-our-community .cta-wrap p br {
    display: none;
  }
  .join-our-community .cta-wrap .btn-dark {
    width: 100%;
    transition: all 0.3s ease;
  }
  .join-our-community .cta-wrap .btn-dark br {
    display: none;
  }
  .join-our-community .cta-wrap .btn-dark:hover {
    background-color: #e3e5e8;
    color: #010306;
  }
}
@media (max-width: 777px) {
  .parallax .para-slide {
    flex-direction: column;
    justify-content: flex-start;
    padding: 2rem 0 8rem 0;
  }
  .parallax .para-slide .slide-content {
    width: 100%;
    padding: 0 2rem;
  }
  .parallax .para-slide .slide-content.video {
    padding: 0;
  }
  .parallax .para-slide .slide-content.video video {
    border: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    margin-bottom: 0rem;
  }
}
@media (max-width: 680px) {
  .hero-new h1 {
    font-size: 3.5rem;
    line-height: 3.5rem;
  }
  .hero-new h1.navie-heading {
    font-size: 2rem;
    line-height: 2rem;
  }
  .hero-new h1.navie-heading:first-child {
    margin-top: 3rem;
  }
  .user-logos .section-content h2 {
    font-size: 4rem;
    line-height: 4rem;
  }
  .join-our-community .cta-wrap {
    margin-top: 2rem;
    gap: 1rem;
    flex-direction: column-reverse;
  }
  .join-our-community .cta-wrap p {
    width: 100%;
  }
  .join-our-community .cta-wrap p br {
    display: none;
  }
  .join-our-community .cta-wrap .btn-dark {
    width: 100%;
    max-width: 100%;
    justify-content: center;
  }
  .join-our-community .cta-wrap .btn-dark br {
    display: none;
  }
}
@media (max-width: 666px) {
  .hero-new .techcrunch.banner img {
    width: 250px;
  }
  .hero-new .hero-cta-wrap .hero-cta {
    width: 100%;
    flex-direction: column;
  }
  .hero-new .hero-cta-wrap .hero-cta li a {
    flex-direction: row;
    justify-content: center;
  }
  .join-our-community .section-wrap h2 {
    font-size: 4rem;
    line-height: 4.5rem;
  }
}
@media (max-width: 575px) {
  .hero-new video {
    right: 0;
  }
  .ui-anime {
    padding: 2rem 0;
  }
  .ui-anime img {
    max-width: unset;
  }
}
@media (max-width: 530px) {
  .join-our-community .section-wrap h2 {
    font-size: 3rem;
    line-height: 3.5rem;
  }
}
@media (max-width: 500px) {
  .user-logos .section-content h2 {
    font-size: 3rem;
    line-height: 3rem;
  }
  .join-our-community .cta-wrap .content-w-logo img {
    display: none;
  }
  .join-our-community .cta-wrap .content-w-logo p {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}
@media (max-width: 488px) {
  .hero-new h1 {
    font-size: 2.5rem;
    line-height: 2.5rem;
    margin-bottom: 2rem;
  }
  .hero-new .hero-wrap {
    padding-top: 0px;
  }
  .hero-new .hero-cta-wrap {
    gap: 2rem;
  }
}
@media (max-width: 450px) {
  .hero-new .techcrunch.banner {
    padding: 1rem 0.5rem;
  }
  .parallax .para-slide .slide-wrap h2 {
    font-size: 4rem;
  }
  .join-our-community .section-wrap h2 {
    font-size: 2.5rem;
    line-height: 3rem;
  }
}
@media (max-width: 400px) {
  .join-our-community {
    padding: 2rem;
  }
  .join-our-community h2 {
    margin: 0;
  }
  .join-our-community .section-wrap {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .join-our-community .cta-wrap {
    margin: 0;
  }
  .join-our-community .cta-wrap .btn-dark {
    gap: 2rem;
    padding: 1rem 3rem;
  }
  .user-logos .section-content h2 {
    font-size: 2.5rem;
    line-height: 2.5rem;
  }
}
.docs-sidebar {
  width: 25%;
}

#documentation {
  width: 100%;
  height: 100%;
  color: #010306;
  background-color: white;
  font-family: "IBM Plex Sans", sans-serif;
}
#documentation .update-banner {
  text-align: center;
  border-bottom: 1px solid #C242B1;
}
#documentation .update-banner .banner-text {
  max-width: 500px;
}
#documentation .update-banner h1 {
  font-size: 2.5rem;
  color: #ad7fff;
  font-weight: 800;
  text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
}
#documentation .update-banner a {
  background-image: url(../img/appland_banner_1000_2.svg);
  background-size: cover;
  background-position: bottom -2px;
  transition: all 0.5s ease;
  color: #e3e5e8;
  padding: 2rem 1.5rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}
#documentation .update-banner a span {
  transition: all 0.5s ease;
  border-radius: 0.5rem;
  margin: 1rem 1rem 0.5rem 1rem;
  padding: 0.5rem 1rem;
  background-color: #925EEE;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
}
#documentation .update-banner a p {
  margin: 0;
  line-height: 1.5;
}
#documentation .update-banner a:hover {
  box-shadow: inset 0px 0px 20px rgba(0, 0, 0, 0.5);
}
#documentation .update-banner a:hover h1 {
  text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
}
#documentation .update-banner a:hover span {
  background-color: #7330e9;
  text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
}
@media (max-width: 800px) {
  #documentation .update-banner h1 {
    font-size: 2rem;
  }
  #documentation .update-banner span {
    font-size: 1.125rem;
    line-height: 1.5;
  }
  #documentation .update-banner .banner-text {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}
#documentation h1 {
  font-size: 2.75rem;
  color: #010306;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
}
#documentation h2 {
  margin-top: 2rem;
  color: #010306;
  font-weight: 700;
  font-family: "Open Sans", sans-serif;
}
#documentation h3 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: #010306;
  text-transform: unset;
  font-family: "Open Sans", sans-serif;
}
#documentation code {
  background-color: rgba(183, 175, 191, 0.25);
  color: #343742;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}
#documentation img {
  max-width: 100%;
}
#documentation .black-white-table {
  background-color: black;
  color: white;
}
#documentation .black-white-table th, #documentation .black-white-table td {
  border: 1px solid #fff;
}
#documentation .large-header {
  font-size: 24px; /* or any size you prefer */
  font-weight: bold; /* Optional: Makes the text bold */
}
#documentation .btn-with-inline-img {
  display: flex;
  align-items: center;
  width: fit-content;
}
#documentation .alert {
  margin-top: 2rem;
}
#documentation blockquote p {
  font-style: italic;
  margin-left: 1rem;
  margin-right: 1rem;
}
#documentation .example-code {
  background-color: #EAEAEA;
  border-radius: 4px;
  color: #171e2f;
  padding: 1.5rem;
  margin-bottom: 1rem;
}
#documentation .docs-content .update-banner {
  text-align: center;
  border-bottom: 1px solid #C242B1;
}
#documentation .docs-content .update-banner .banner-text {
  max-width: 500px;
}
#documentation .docs-content .update-banner h1 {
  font-size: 2.5rem;
  color: #ad7fff;
  font-weight: 800;
  text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
}
#documentation .docs-content .update-banner a {
  background-image: url(../img/appland_banner_1000_2.svg);
  background-size: cover;
  background-position: bottom -2px;
  transition: all 0.5s ease;
  color: #e3e5e8;
  padding: 2rem 1.5rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}
#documentation .docs-content .update-banner a span {
  transition: all 0.5s ease;
  border-radius: 0.5rem;
  margin: 1rem 1rem 0.5rem 1rem;
  padding: 0.5rem 1rem;
  background-color: #925EEE;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
}
#documentation .docs-content .update-banner a p {
  margin: 0;
  line-height: 1.5;
}
#documentation .docs-content .update-banner a:hover {
  box-shadow: inset 0px 0px 20px rgba(0, 0, 0, 0.5);
}
#documentation .docs-content .update-banner a:hover h1 {
  text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
}
#documentation .docs-content .update-banner a:hover span {
  background-color: #7330e9;
  text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
}
@media (max-width: 800px) {
  #documentation .docs-content .update-banner h1 {
    font-size: 2rem;
  }
  #documentation .docs-content .update-banner span {
    font-size: 1.125rem;
    line-height: 1.5;
  }
  #documentation .docs-content .update-banner .banner-text {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}
#documentation .docs-content img {
  margin-top: 1rem;
}
#documentation .docs-content img.inline-button-img {
  margin-right: 1rem;
  margin-top: auto;
  padding: 2px;
  width: 30px;
}
#documentation .docs-content img.inline-partial-screenshot {
  max-width: 450px;
  margin-top: 0px;
  background-color: #92a8bf;
}
#documentation .docs-content img.sm-doc-image {
  max-width: 500px;
}
#documentation .docs-content li img {
  margin-bottom: 2rem;
}
#documentation .docs-content .video-container {
  max-width: 991px;
  margin: auto;
}
#documentation .docs-content .video-container video {
  width: 100%;
  height: auto;
}
#documentation .docs-content .framework-logos {
  margin-bottom: 2rem;
  display: flex;
  max-width: 100%;
  flex-wrap: wrap;
  margin-top: 2rem;
  width: 100%;
  justify-content: space-around;
}
#documentation .docs-content .video-screenshot {
  display: block;
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
}
#documentation .docs-content .intellij-screenshot {
  display: block;
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
}
#documentation .docs-content .iframe-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-top: 2rem;
  padding-top: 56.25%;
}
#documentation .docs-content .responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
#documentation .docs-content img.quickstart-ide-logo {
  margin-right: 2rem;
}
#documentation .docs-content .quickstart-ide-cta {
  display: flex;
  align-items: center;
}
#documentation .docs-content .quickstart-ide-cta p {
  margin-top: 0;
  margin-bottom: 0.5rem;
}
#documentation .docs-content .quickstart-ide-cta .quickstart-ide-logo {
  margin-top: 0;
  height: min-content;
}
#documentation .quickstart .panel-heading {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}
#documentation .quickstart .panel-toggle-icon:after {
  content: "+";
  color: #424242;
  float: right;
  transition: all 0.5s;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}
#documentation .quickstart .panel-toggle-icon.collapsed:after {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  transform: rotate(0deg);
}
#documentation .panel-title a.side-nav-heading:before {
  content: "+";
  color: #424242;
  float: right;
  transition: all 0.5s;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}
#documentation .panel-title a.side-nav-heading.collapsed:before {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  transform: rotate(0deg);
}
#documentation .panel-body .side-nav-heading {
  font-weight: normal;
}
#documentation .toggle-icon {
  float: right;
}
#documentation .example-code {
  background-color: #071223;
  padding: 0;
  border-radius: 0.5rem;
}
#documentation .example-code .highlight {
  background: none;
  margin: 0;
}
#documentation .example-code .highlight code {
  color: #808b98;
}
#documentation .example-code pre {
  background-color: rgba(183, 175, 191, 0.25);
  padding: 1.5rem 0;
  border-radius: 4px;
}
#documentation .highlight {
  background-color: #EAEAEA;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
}
#documentation .highlight pre {
  margin: 0;
  padding: 1.5rem;
}
#documentation .highlight code {
  background: none;
  padding: 0;
  color: #1f2940;
}
#documentation .docs-container {
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 61px);
  max-width: 1300px;
  margin: 0 auto 0 0;
  display: flex;
  flex-direction: row;
}
#documentation .side-nav-heading {
  font-weight: 800;
}
#documentation .page-nav-controls {
  display: flex;
  align-items: baseline;
  margin-top: 1rem;
}
#documentation .page-nav-controls a {
  margin-left: 0.75rem;
}
#documentation .modal.docs-modal .modal-content {
  border: 0px;
  border-radius: 0px;
}
#documentation .modal.docs-modal .modal-dialog {
  border: 2px solid black;
  border-radius: 0px;
  max-width: 80%;
}
#documentation .modal.docs-modal .modal-dialog button.close {
  color: white;
}
#documentation .modal.docs-modal .modal-body {
  font-size: 15px;
  background-color: white;
}
#documentation .inline-link {
  cursor: pointer;
}
#documentation #sidebar-wrap {
  position: sticky;
  top: 0;
  bottom: 0;
}
#documentation ul.sidebar-navigation {
  border-right: 1px solid #808b98;
  list-style: none;
  padding: 0;
  height: 100vh;
  overflow: auto;
}
#documentation ul.sidebar-navigation ul {
  padding: 0 1.5rem 0 1.5rem;
  color: #171e2f;
  margin: 0.5rem 0;
  list-style: outside;
}
#documentation ul.sidebar-navigation ul a {
  color: #424242;
  transition: all 0.3s ease;
  width: 100%;
}
#documentation ul.sidebar-navigation ul li {
  padding: 0.25rem 0;
  line-height: 1rem;
  border: 0;
}
#documentation ul.sidebar-navigation ul .steps-container {
  width: 100%;
  margin: auto;
}
#documentation ul.sidebar-navigation .main-nav {
  line-height: 3rem;
}
#documentation ul.sidebar-navigation li {
  margin-bottom: 1rem;
  padding: 0.8rem 1rem;
  line-height: 1rem;
  margin: 0;
  color: #010306;
  border-top: 1px solid #808b98;
}
#documentation ul.sidebar-navigation li:first-of-type {
  border-top: 0;
}
#documentation ul.sidebar-navigation li .docs-cta {
  padding: 1rem;
}
#documentation ul.sidebar-navigation li .docs-cta .logos {
  display: none;
  flex-direction: row;
  gap: 2rem;
  justify-content: center;
  margin-bottom: 1rem;
}
#documentation ul.sidebar-navigation li .docs-cta .logos img {
  width: 70px;
}
#documentation ul.sidebar-navigation li .docs-cta .logos a {
  padding: 1rem;
}
#documentation ul.sidebar-navigation li .docs-cta .btn {
  color: #fff;
}
#documentation ul.sidebar-navigation li details.guides-accordion li a {
  font-size: 0.85rem;
}
#documentation ul.sidebar-navigation li details.guides-accordion li::marker {
  color: #010306;
}
#documentation ul.sidebar-navigation h3 {
  margin: 0;
  font-weight: 600;
}
#documentation ul.sidebar-navigation a {
  color: #212121;
  width: 100%;
}
#documentation .section-nav li.toc-entry a, #documentation .panel-body {
  font-size: 0.85rem;
}
#documentation .section-nav li.toc-entry.toc-h2 a {
  font-weight: normal;
}
#documentation .guides-list summary::after {
  content: "";
  display: none;
}
#documentation .docs-content {
  width: 75%;
  flex-grow: 2;
  padding: 1.5rem;
}
#documentation .docs-content h1 {
  color: #010306;
}
#documentation .docs-content h1.qs-header {
  color: #343742;
  margin-top: 2rem;
}
#documentation .docs-content a {
  color: #4362b1;
}
#documentation .docs-content a.step-label {
  color: white;
}
#documentation .docs-content a.btn {
  color: white;
}
#documentation .docs-content #related-blog-posts .blog-post {
  background-color: black;
  color: #e3e5e8;
}
#documentation .docs-content #related-blog-posts .blog-post img {
  margin: 1rem 0 0 0;
  width: 100%;
  height: auto;
}
#documentation .docs-content #related-blog-posts .blog-post a {
  color: #C242B1;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.8rem;
}
#documentation .docs-content #related-blog-posts .blog-post h2 {
  line-height: 1.2rem;
  margin-top: 1rem;
}
#documentation .docs-content #related-blog-posts .blog-post .post-exerpt {
  margin-bottom: 1rem;
}
#documentation .docs-content .toc {
  margin-bottom: 3rem;
}
#documentation .docs-content .analysis-doc-list {
  list-style-type: none;
  padding: 0;
}
#documentation .docs-content .analysis-doc-list hr {
  border-top: 1px solid #bcbfc3;
  margin: 4rem 0;
}
#documentation .docs-content .analysis-doc-list .analysis-rule h2, #documentation .docs-content .analysis-doc-list .analysis-label h2 {
  margin-top: 0.5rem;
}
#documentation .docs-content .analysis-doc-list .analysis-rule h3, #documentation .docs-content .analysis-doc-list .analysis-label h3 {
  font-size: 1.5rem;
}
#documentation .docs-content .analysis-doc-list .analysis-rule p, #documentation .docs-content .analysis-doc-list .analysis-label p {
  margin-top: 0.5rem;
}
#documentation .docs-content .analysis-doc-list .analysis-rule table, #documentation .docs-content .analysis-doc-list .analysis-label table {
  width: 100%;
  border: 1px solid #343742;
  border-radius: 4px;
  margin: 1.5rem 0;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.08);
}
#documentation .docs-content .analysis-doc-list .analysis-rule table tr, #documentation .docs-content .analysis-doc-list .analysis-label table tr {
  border-bottom: 1px solid #343742;
}
#documentation .docs-content .analysis-doc-list .analysis-rule table tr td, #documentation .docs-content .analysis-doc-list .analysis-label table tr td {
  padding: 0.5rem 0 0.5rem 0.5rem;
}
#documentation .docs-content .analysis-doc-list .analysis-rule table tr td.name, #documentation .docs-content .analysis-doc-list .analysis-label table tr td.name {
  font-weight: 800;
}
#documentation .docs-content .analysis-doc-list .analysis-rule table tr td.value, #documentation .docs-content .analysis-doc-list .analysis-label table tr td.value {
  border-left: 1px solid #343742;
}
#documentation .docs-content .analysis-doc-list .analysis-rule .analysis-metrics, #documentation .docs-content .analysis-doc-list .analysis-label .analysis-metrics {
  border: 1px solid #808b98;
  border-radius: 4px;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.08);
  margin: 0.5rem 0;
}
#documentation .docs-content .analysis-doc-list .analysis-rule .analysis-metrics ul, #documentation .docs-content .analysis-doc-list .analysis-label .analysis-metrics ul {
  padding: 0;
  list-style-type: none;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid #808b98;
}
#documentation .docs-content .analysis-doc-list .analysis-rule .analysis-metrics ul:last-of-type, #documentation .docs-content .analysis-doc-list .analysis-label .analysis-metrics ul:last-of-type {
  border-bottom: 0;
}
#documentation .docs-content .analysis-doc-list .analysis-rule .analysis-metrics ul li, #documentation .docs-content .analysis-doc-list .analysis-label .analysis-metrics ul li {
  line-height: 2rem;
  padding-left: 0.5rem;
  margin-bottom: 0;
}
#documentation .docs-content .analysis-doc-list .analysis-rule .analysis-metrics ul li.name, #documentation .docs-content .analysis-doc-list .analysis-label .analysis-metrics ul li.name {
  font-weight: 800;
}
#documentation .docs-content .analysis-doc-list .analysis-rule .analysis-metrics ul li.value, #documentation .docs-content .analysis-doc-list .analysis-label .analysis-metrics ul li.value {
  border-left: 1px solid #808b98;
}

#docs-search form {
  margin-bottom: 2rem;
}
#docs-search form input[type=text] {
  flex: 2;
  border-radius: 0.5rem;
  border: 1px solid #808b98;
}
#docs-search form input[type=submit] {
  margin-left: 1rem;
  border-radius: 0.5rem;
  border: 1px solid #808b98;
}

#lunrsearchresults p {
  font-weight: 600;
  font-size: 2rem;
}
#lunrsearchresults ul {
  list-style-type: none;
  padding: 0;
}
#lunrsearchresults ul li {
  padding: 0;
  border-bottom: 1px solid #EAEAEA;
}
#lunrsearchresults ul li a {
  padding: 1rem;
  transition: all 0.3s ease;
}
#lunrsearchresults ul li:hover {
  border-bottom: 1px solid #e3e5e8;
}
#lunrsearchresults ul li:hover a {
  background-color: #f2f2f2;
}
#lunrsearchresults ul li:hover a .title {
  color: #4362b1;
  text-decoration: none;
}
#lunrsearchresults .title {
  font-weight: 800;
  color: #171e2f;
}
#lunrsearchresults .body {
  color: #171e2f;
}
#lunrsearchresults .url {
  color: #4362b1;
}

.doc-highlight {
  font-size: 1.5rem;
  font-weight: 600;
}

.btn .material-icons {
  color: white;
}

.guides-dropdown {
  background-color: #E1E2E2;
}

#nav-accordion.guides .panel-title svg {
  margin-right: 0.4rem;
}
#nav-accordion.guides #nav-guides a {
  font-weight: 400;
}
#nav-accordion.guides #reference-guides a {
  font-weight: 400;
}
#nav-accordion.guides #analysis-docs a {
  font-weight: 400;
}

.accordion-option {
  width: 100%;
  float: left;
  clear: both;
  margin: 15px 0;
}

.accordion-option .title {
  font-size: 20px;
  font-weight: bold;
  float: left;
  padding: 0;
  margin: 0;
}

.accordion-option .toggle-accordion {
  float: right;
  font-size: 16px;
  color: #6a6c6f;
}

#documentation .steps-container {
  width: 100%;
  margin: auto;
}
#documentation .steps {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  color: #e3e5e8;
  padding: 1.5rem;
  background-color: #010306;
  border-radius: 4px;
}
#documentation .steps .steps-box {
  width: 33%;
}
#documentation h4 {
  margin-top: 3rem;
}
#documentation h5 {
  font-size: 1rem;
  margin-top: 2rem;
  margin-right: 1rem;
  font-weight: bold;
}
#documentation #debugging-illo .steps .steps-box .steps-img-container {
  margin: 1rem;
}
#documentation #debugging-illo .steps .steps-box .steps-img-container.full-bleed {
  margin: 0px;
}
#documentation .survey-container {
  height: 3rem;
  display: flex;
  align-items: center;
}
#documentation .docs-survey {
  display: flex;
  flex-direction: row;
  align-items: center;
}
#documentation .docs-survey a.btn {
  color: white;
  margin-left: 0.5rem;
}
#documentation .survey-icon {
  font-size: 1rem;
  color: white;
}
#documentation .inline-survey-label {
  font-size: 1rem;
  font-weight: bold;
}
#documentation #thank-you-message {
  display: none;
  font-style: italic;
  color: #343742;
}

#related-blog-posts ul {
  list-style: none;
  padding-left: 0px;
}
#related-blog-posts h4 {
  margin-bottom: 2rem;
}
#related-blog-posts .related-blog-post-list {
  margin-top: -2rem;
}

#related-videos .video-post-list {
  list-style-type: none;
  padding: 0 0 0 0;
  max-width: 1300px;
  margin: auto;
  display: flex;
  flex-direction: row;
  column-gap: 1rem;
  row-gap: 1rem;
  color: white;
  flex-grow: 0;
  flex-basis: 30%;
  flex-wrap: wrap;
}
#related-videos .video-post-list h3 {
  margin-top: 1rem;
}
#related-videos .video-post-list h3 a {
  color: #C242B1;
}
#related-videos .video-post-list i {
  font-size: 3rem;
  color: white;
  padding-top: 1rem;
}
#related-videos .video-post-list .post-content {
  margin-bottom: 1rem;
}
#related-videos .video-post-list .video-post {
  background-color: black;
  border: 1px solid #171e2f;
  padding: 0 1.5rem;
  margin: 0.5rem;
  display: flex;
  flex-direction: column;
  max-width: 30%;
  border-radius: 4px;
}
#related-videos .video-post-list .video-post .post-exerpt p {
  margin-top: 0;
  color: white;
}
#related-videos .video-post-list .video-post .video-tags .header-tag-list {
  padding-left: 2rem;
  padding-top: 0.5rem;
}
#related-videos .video-post-list .video-post .video-tags .tag-list {
  padding-inline-start: 0px !important;
}
#related-videos .video-post-list .video-post .video-tags .tag-list li {
  list-style: none;
  padding: 0.4rem;
  display: inline-block;
  border: 1px solid #808b98;
  color: #808b98;
  border-radius: 4px;
}
#related-videos .video-post-list .video-post .video-tags .tag-list li .btn:active {
  border-style: outset;
  -moz-box-shadow: inset 0 0 0px white;
  -webkit-box-shadow: inset 0 0 0px white;
  box-shadow: inset 0 0 0px white;
}
#related-videos .video-post-list .video-post .video-tags .tag-list li.tag-ruby {
  border-color: #CC342D;
}
#related-videos .video-post-list .video-post .video-tags .tag-list li.tag-ruby:hover {
  background-color: #CC342D;
}
#related-videos .video-post-list .video-post .video-tags .tag-list li.tag-ruby:hover a {
  color: white;
}
#related-videos .video-post-list .video-post .video-tags .tag-list li.tag-ruby a {
  color: #CC342D;
}
#related-videos .video-post-list .video-post .video-tags .tag-list li.tag-java {
  border-color: #E76F00;
}
#related-videos .video-post-list .video-post .video-tags .tag-list li.tag-java:hover {
  background-color: #E76F00;
}
#related-videos .video-post-list .video-post .video-tags .tag-list li.tag-java:hover a {
  color: white;
}
#related-videos .video-post-list .video-post .video-tags .tag-list li.tag-java a {
  color: #E76F00;
}
#related-videos .video-post-list .video-post .video-tags .tag-list li.tag-python {
  border-color: #FFC331;
}
#related-videos .video-post-list .video-post .video-tags .tag-list li.tag-python:hover {
  background-color: #FFC331;
}
#related-videos .video-post-list .video-post .video-tags .tag-list li.tag-python:hover a {
  color: white;
}
#related-videos .video-post-list .video-post .video-tags .tag-list li.tag-python a {
  color: #FFC331;
}

@media (min-width: 991px) {
  .recording-choices {
    display: flex;
    flex-direction: row;
    max-width: 90%;
  }
  .recording-choice {
    flex-grow: 1;
    max-width: 20rem;
  }
  .recording-choice:nth-child(2) {
    margin-left: 2rem;
  }
  .disclaimer {
    max-width: 75%;
  }
}
@media (max-width: 991px) {
  .video-container {
    max-width: 100%;
  }
  .recording-choice:nth-child(2) {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }
  #documentation .docs-container {
    flex-direction: column;
  }
  #documentation .docs-container .docs-sidebar, #documentation .docs-container .docs-content {
    width: 100%;
  }
  #documentation .docs-content .video-screenshot {
    max-width: 100%;
  }
  #documentation .docs-content .toc li {
    margin-bottom: 0;
  }
  #related-videos .video-post-list {
    flex-direction: column;
  }
  #related-videos .video-post-list .video-post {
    max-width: 100%;
  }
}
/* Product pages */
#product {
  width: 100%;
}
#product img {
  border-radius: 1rem;
}
#product .breadcrumb-wrap {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}
#product .breadcrumbs {
  color: #4a4f5f;
  font-size: 0.85rem;
  line-height: 1.25rem;
  margin-bottom: 0.5rem;
}
#product .breadcrumbs a {
  color: #4a4f5f;
}
#product .breadcrumbs .active {
  font-weight: 600;
  color: #6c7289;
}
#product blockquote {
  border-left: 6px solid;
  padding-left: 1rem;
  max-width: 900px;
  font-size: 2.5rem;
  line-height: 4rem;
  margin-bottom: 4rem;
  margin-top: 4rem;
}
#product hr {
  border-top: 1px solid rgb(146, 95, 238);
}
#product .landing .section-content {
  padding: 3rem;
}
#product .landing .capabilities-list {
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
  gap: 1rem;
  padding: 0;
}
#product .landing .capabilities-list a {
  border-radius: 1rem;
  border: 1px solid #1b1234;
  background-color: #1b1234;
  color: #955fca;
  padding: 1rem;
  width: 100%;
  margin: 0;
  min-height: 200px;
  transition: all 0.3s ease;
}
#product .landing .capabilities-list a h2 {
  color: #955fca;
}
#product .landing .capabilities-list a p {
  color: #e3e5e8;
}
#product .landing .capabilities-list a:hover {
  text-decoration: none;
  background-color: #150e29;
  border: 1px solid #955fca;
  color: #e3e5e8;
}
#product .landing .heading-icon {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: center;
}
#product .landing .heading-icon img {
  width: 2rem;
  height: 2rem;
  border-radius: 0;
}
#product ul.multi-list {
  margin-top: 4rem;
  list-style: none;
  columns: 4;
  text-align: left;
  font-family: monospace;
}
#product ul.multi-list li {
  margin-bottom: 1rem;
}
#product ul.counter-feature {
  list-style: none;
  color: #777;
}
#product ul.counter-feature li:before {
  content: "X";
  margin: 0 5px 0 -15px;
  color: #f00;
}
#product ul.navie-feature {
  list-style: none;
}
#product ul.navie-feature li:before {
  content: "✓";
  margin: 0 5px 0 -15px;
  color: rgb(0, 255, 4);
}
#product .product-cta {
  background: -webkit-linear-gradient(45deg, #C242B1, #471f8e 100%);
  padding: 3rem;
  margin: 0;
}
#product .product-cta .section-content {
  display: flex;
  align-items: center;
  justify-content: center;
}
#product .product-cta a {
  background-color: #010306;
  padding: 1rem 1.5rem;
  border-radius: 2rem;
  border: 2px solid #010306;
  color: #e3e5e8;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  font-weight: 800;
  transition: all 0.3s ease;
  min-width: 320px;
  text-align: center;
}
#product .product-cta a img {
  width: 1.5rem;
}
#product .product-cta a:hover {
  background-color: #e3e5e8;
  color: #010306;
  text-decoration: none;
}
#product .sep-line {
  display: block;
  width: 100%;
  max-width: 1300px;
  height: 2px;
  background: -webkit-linear-gradient(45deg, #C242B1, #471f8e 100%);
  margin: 2rem auto;
}
#product .heading-wrap {
  gap: 2rem;
  display: flex;
}
#product .heading-wrap img {
  width: 100%;
}
#product .heading-wrap .heading-content {
  width: 100%;
}
#product .slide-content.video video {
  width: 100%;
  max-width: 700px;
  border-radius: 1rem;
}
#product .slide-content.video video.b-1 {
  border: 1px solid #1b1234;
}
#product.security-scanning .product-content.column.tuck {
  padding-top: 2rem;
}
#product.security-scanning .product-content.column p {
  color: rgba(227, 229, 232, 0.9098039216);
}
#product.security-scanning .product-content.column .col-item {
  border: 1px solid #1b1234;
  padding: 1.25rem 1.5rem;
  border-radius: 1rem;
}
#product.security-scanning .product-content.column .col-item p {
  margin: 1rem 0 0 0;
}
#product.security-scanning .product-content.column .two-col-wrap {
  gap: 6rem;
  justify-content: space-between;
}
#product.security-scanning .product-content.column .three-col-wrap {
  gap: 1rem;
  justify-content: space-between;
}
#product.security-scanning .product-content.column .four-col-wrap {
  display: flex;
  gap: 3rem;
  justify-content: space-between;
}
#product section {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}
#product section.product-hero {
  background: linear-gradient(180deg, #150f26 0%, #010303 60%);
  max-width: unset;
  min-height: 300px;
}
#product section.product-hero .btn {
  max-width: fit-content;
  padding: 1rem 2rem 1rem 2rem;
}
#product section.product-hero.landing {
  padding-top: 2rem;
}
#product section.product-hero .section-content {
  width: 100%;
  max-width: 1300px;
  padding: 2rem;
  background: rgb(28, 19, 52);
  background: -webkit-linear-gradient(180deg, #C242B1, #471f8e 100%);
  border-radius: 1rem;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2.5rem;
}
#product section.product-hero .section-content.landing {
  flex-direction: row;
  justify-content: flex-start;
  padding: 1rem 2rem;
}
#product section.product-hero .section-content.gh-action-img {
  height: 460px;
  max-height: 460px;
  background: url(/assets/img/product/gh-action-hero-bg.webp);
  background-size: cover;
  position: relative;
  align-items: unset;
  padding-top: 3rem;
}
#product section.product-hero .section-content.navie-img {
  height: 460px;
  max-height: 460px;
  background: url(/assets/img/product/complexity-group.webp);
  background-size: cover;
  position: relative;
  align-items: unset;
  padding-top: 3rem;
}
#product section.product-hero .section-content.navie-purple {
  min-height: 460px;
  background: url(/assets/img/navie-purp-header.webp);
  background-size: cover;
  position: relative;
  align-items: unset;
  padding-top: 3rem;
}
#product section.product-hero .section-content.code-editor-img {
  height: 460px;
  max-height: 460px;
  background: url(/assets/img/product/appmap-in-code-editor-header.webp);
  background-size: cover;
  position: relative;
  align-items: unset;
  padding-top: 3rem;
}
#product section.product-hero .section-content.appmap-enterprise-img {
  height: 460px;
  max-height: 460px;
  background: url(/assets/img/appmap-enterprise-header-no-logo.webp);
  background-size: cover;
  position: relative;
  align-items: unset;
  padding-top: 3rem;
}
#product section.product-hero .section-content .hero-img {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  align-items: center;
  margin-bottom: 1rem;
}
#product section.product-hero .section-content .hero-img h1 {
  margin: 0;
}
#product section.product-hero .section-content .hero-img img {
  max-width: 4rem;
  max-height: 4rem;
  box-shadow: none;
  border-radius: 0;
  margin: 0;
  border: 1px solid #926dd4;
}
#product section.product-hero .section-content .hero-img img.icon {
  border: 0;
}
#product section.product-hero .section-content #appmap-enterprise-header-1 {
  display: none;
}
#product section.product-hero .section-content #appmap-enterprise-header-2 {
  display: none;
}
#product section.product-hero .section-content .octocat-container {
  overflow: hidden;
  position: absolute;
  width: 150px;
  height: 128px;
  bottom: 0;
}
#product section.product-hero .section-content #octocat {
  width: 177px;
  position: absolute;
  left: 0;
  transform: rotate(20deg);
}
#product section.product-hero .section-content img {
  width: 100%;
  max-width: 600px;
  border-radius: 1rem;
  border: 1px solid #472c75;
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.4117647059);
}
#product section.product-hero .section-content img.b-1 {
  border: 1px solid #1b1234;
}
#product section.product-hero .section-content img.hero-img {
  max-width: 5rem;
  max-height: 3rem;
  box-shadow: none;
  border-radius: 0;
  margin: 0 0 1rem 0;
}
#product section.product-hero .section-content video {
  width: 100%;
  max-width: 600px;
  margin-left: 2rem;
  border-radius: 1rem;
}
#product section.product-hero .section-content video.b-1 {
  border: 1px solid #1b1234;
}
#product section.product-hero .section-content .content-wrap {
  padding: 0;
}
#product section.product-hero .section-content .content-wrap.gh-content-wrap {
  max-width: 500px;
}
#product section.product-content {
  display: flex;
  gap: 6rem;
  padding: 4rem;
}
#product section.product-content #appmap-data-model-section {
  text-align: center;
  margin: auto;
  background-color: #1b1234;
  padding: 2rem;
  border-radius: 1rem;
}
#product section.product-content #appmap-data-model-section h2 {
  margin-bottom: 2rem;
  font-size: 3rem;
}
#product section.product-content img {
  border-radius: 1rem;
  width: 100%;
  max-width: 50%;
}
#product section.product-content img#appmap-data-model {
  max-width: 80%;
  margin: auto;
}
#product section.product-content img.full {
  max-width: 1000px;
}
#product section.product-content img.full img {
  width: 100%;
  max-width: 1000px;
}
#product section.product-content.column {
  flex-direction: column;
  gap: 1rem;
}
#product section.product-content.column img {
  border-radius: 1rem;
  margin-bottom: 2rem;
}
#product section.product-content.column .section-content {
  width: 100%;
  max-width: 100%;
}
#product section.product-content.row {
  flex-direction: row;
}
#product section.product-content.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
#product section.product-content.two-col img {
  width: 100%;
  max-width: 100%;
}
#product section.product-content.two-col.tuck {
  padding-top: 1rem;
  margin-bottom: 3rem;
}
#product section.product-content.two-col .section-content {
  padding: 1.5rem;
  gap: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
#product section.product-content.two-col .section-content img {
  border-radius: 1rem;
}
#product section.product-content.callout {
  width: 100%;
  background: none;
  align-items: center;
  margin-top: 0;
  margin-bottom: 0;
  justify-content: center;
  padding-bottom: 0.5rem;
}
#product section.product-content.callout img {
  width: 100%;
  max-width: 1300px;
  border-radius: 1rem;
}
#product section.product-content.one-col {
  width: 100%;
  background: rgb(28, 19, 52);
  background: -webkit-linear-gradient(45deg, #C242B1, #471f8e 100%);
  padding: 4rem;
  border-radius: 1rem;
  align-items: center;
  margin-top: 6rem;
  margin-bottom: 6rem;
}
#product section.product-content.one-col h2 {
  color: #e3e5e8;
}
#product section.product-content.one-col p {
  color: rgba(225, 226, 226, 0.7490196078);
}
#product section.product-content.one-col img {
  border-radius: 1rem;
  width: 100%;
  max-width: 700px;
}
#product section.product-content.one-col video {
  border-radius: 1rem;
  width: 100%;
  max-width: 700px;
}
#product section.product-content .three-col-wrap {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(45%, 1fr));
}
#product section.product-content .three-col-wrap .col-item {
  padding: 1.25rem 1.5rem;
  border: 1px solid rgba(98, 56, 140, 0.75);
  border-radius: 1rem;
  width: 100%;
  min-width: calc(50% - 0.5rem);
}
#product section.product-content .three-col-wrap .col-item h4 {
  color: #955fca;
  font-weight: 600;
}
#product section.product-content h2 {
  color: #e3e5e8;
}
#product section.product-content h3 {
  color: #e3e5e8;
  font-weight: 600;
}
#product section.product-content h4 {
  font-weight: 600;
}
#product section.product-content.horiz {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}
#product section.product-content.horiz.callout {
  flex-direction: column;
  padding-top: 0;
}
#product section.product-content.horiz.callout h4 {
  background: -webkit-linear-gradient(#c042b1, #642795);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 3rem;
  font-weight: 600;
  margin-top: 0;
}
#product section.product-content.horiz.callout .section-content {
  max-width: 74%;
}
#product section.product-content.horiz.gh-action-desc {
  align-items: unset;
}
#product section.product-content.horiz img {
  width: 100%;
  max-width: 850px;
  border-radius: 1rem;
  border: solid 1px #3a383a;
}
#product section.product-content.horiz img#sequence-diagram-illo {
  border: solid #7f6be5;
}
#product section.product-content.horiz video {
  width: 100%;
  max-width: 50%;
  border-radius: 1rem;
}
#product section.product-content.horiz .section-content {
  width: 100%;
  max-width: 50%;
}
#product section.product-content.horiz .content-wrap {
  width: 100%;
}
#product section.product-content.horiz.tuck {
  padding-top: 2rem;
}
#product section.product-content.horiz.tuck-more {
  padding-top: 0;
}
#product section.product-content.horiz.horiz-left {
  flex-direction: row;
}
#product section.product-content.horiz.horiz-right {
  flex-direction: row-reverse;
}
#product section.product-content.stack-left {
  display: grid;
  grid-template-columns: 50% auto;
  gap: 2rem;
  padding: 8rem 4rem;
}
#product section.product-content.stack-left img {
  width: 100%;
  max-width: 700px;
  border-radius: 1rem;
}
#product section.product-content.stack-left .section-content {
  max-width: 100%;
}
#product section.product-content.stack-right {
  display: grid;
  grid-template-columns: 50% auto;
  gap: 2rem;
  border-bottom: 1px solid #1b1234;
  padding: 8rem 4rem;
}
#product section.product-content.stack-right img {
  width: 100%;
  max-width: 700px;
  border-radius: 1rem;
}
#product section.product-content.stack-right .section-content {
  max-width: 100%;
}
#product section.product-content .section-content {
  width: 100%;
  margin: 0;
}
#product section.product-content .section-content img {
  width: 100%;
}
#product section.product-content .section-content img.slack-icon {
  height: 20px;
  width: 20px;
  max-width: 20px;
  margin-right: 1rem;
}
#product section.product-content .section-content.row {
  flex-direction: row;
}
#product section.product-content .section-content.column {
  flex-direction: column;
}
#product section.product-content .section-content.tuck {
  padding-top: 2rem;
}
#product section.product-content .placeholder-image img {
  border-radius: 1rem;
}
#product h1 {
  font-size: 3rem;
  line-height: 3.25rem;
}
#product h2 {
  font-weight: 600;
}
#product h2.subhead {
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.5rem;
  color: rgba(225, 226, 226, 0.7490196078);
}
#product .product-content.tuck {
  padding-top: 2rem;
}
#product .product-content.tuck-more {
  padding-top: 0;
}
#product .product-content.heading {
  padding-bottom: 0;
}
#product .product-content.text-col {
  max-width: 1000px;
  padding: 0 0 2rem 0;
  flex-direction: column;
  gap: 1rem;
}
#product .product-content p {
  margin-top: 0.25rem;
  line-height: 1.65rem;
}
#product .product-video {
  width: 100%;
  height: 300px;
}
#product.security-faq .product-content .section-content ol {
  margin-top: 1.5rem;
}
#product.security-faq .product-content .section-content ol li {
  margin: 2.5rem 0;
}
#product.security-faq .product-content .section-content ol li p {
  margin: 0.5rem 0;
}
#product.security-faq .product-content .section-content ol li ul li {
  margin: 0.5rem 0;
}

.info-table.product-table {
  max-width: 90%;
  margin: auto;
}
.info-table.product-table tr {
  border-bottom: solid 1px #955fca;
}
.info-table.product-table p.table-content {
  max-width: 35rem;
  margin-left: 2rem;
}
.info-table.product-table .large-text {
  font-size: 1.5rem;
}

h2.stand-alone-header {
  max-width: 1300px;
  margin: auto;
}

#product.analysis h1 {
  font-size: 4rem;
  line-height: 4.5rem;
  text-transform: uppercase;
}
#product.analysis h2.subhead {
  font-size: 1.1em;
  line-height: 1.55rem;
  margin-bottom: 1rem;
}
#product.analysis img.b-1 {
  border: 1px solid #1b1234;
}
#product.analysis img.b-2 {
  border: 2px solid #1b1234;
}
#product.analysis .section-content.landing p {
  line-height: 1.5rem;
  margin-bottom: 0;
}
#product.analysis .section-content.landing img {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin-left: 0;
  max-width: 900px;
}
#product.analysis .section-content.landing img.slack-icon {
  height: 20px;
  width: 20px;
  max-width: 20px;
  margin: 0px;
  margin-top: 2px;
}
#product.analysis .section-content.landing img.gh-icon {
  height: 22px;
  width: 22px;
  max-width: 22px;
  margin-top: -2px;
  margin-right: 4px;
}
#product.analysis .section-content.landing .content-wrap {
  display: flex;
  gap: 1rem;
  flex-direction: column;
  min-width: 420px;
}
#product.analysis .section-content.landing .content-wrap .hero-img {
  margin-bottom: 0;
}

#navie-button {
  max-width: 20rem;
}

.btn-hero {
  border-radius: 2rem;
  box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.15);
  margin-top: 1rem;
  transition: all 0.3s ease;
  padding: 0.375rem 0.89rem;
}
.btn-hero.gh-action-cta {
  padding: 1rem 2rem;
  display: flex;
  flex-direction: row;
}
.btn-hero.gh-action-cta img {
  max-width: 48px;
  width: 48px;
}

h5.early-access-badge {
  background-color: transparent;
  color: #e3e5e8;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  margin-bottom: 0;
  padding: 0.6rem 1rem 0.54rem 1rem;
  text-transform: uppercase;
  width: fit-content;
  font-family: "Courier New", Courier, monospace;
  margin-top: 2rem;
}

.hero-cta {
  display: flex;
  gap: 1rem;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.4rem;
}
.hero-cta p, .hero-cta a {
  margin: 0;
}

.long-subheadline {
  max-width: 700px;
}

@media (max-width: 1300px) {
  #product section.product-content.horiz .section-content {
    margin-left: 2rem;
  }
  #product section.product-content.horiz.horiz-left .section-content {
    margin-left: 0rem;
    margin-right: 2rem;
  }
  #product section.product-hero {
    padding: 2rem 4rem 4rem 4rem;
  }
  #product section.product-hero .section-content {
    flex-direction: column;
    gap: 2rem;
  }
  #product section.product-hero .section-content img {
    width: 100%;
    max-width: 100%;
  }
  #product section.product-hero .section-content img#octocat {
    margin: 0px;
  }
  #product section.product-hero .section-content video {
    margin: 0;
    width: 90%;
    max-width: 600px;
    margin-top: 1rem;
    border-radius: 1rem;
  }
  #product section.product-content.one-col {
    border-radius: 0;
    gap: 2rem;
  }
  #product section.product-content.text-col {
    padding: 2rem 4rem 0 4rem;
  }
}
@media (max-width: 1050px) {
  #product.how-appmap-works .product-hero h1 br {
    display: none;
  }
  #product .heading-wrap {
    flex-direction: column;
  }
  #product section.product-content.column .heading-wrap img {
    max-width: 100%;
  }
  #product section.product-content.column .three-col-wrap {
    flex-direction: column;
    margin-bottom: 4rem;
  }
  #product section.product-content.column .three-col-wrap .col-item {
    width: 100%;
  }
  #product .landing .section-content {
    padding: 1.5rem;
  }
  #product section.product-content.horiz img {
    max-width: 650px;
  }
}
@media (max-width: 980px) {
  #product .unwrap br {
    display: none;
  }
}
@media (max-width: 900px) {
  #product .landing .section-content {
    padding: 3rem;
  }
  #product .landing .section-content ul {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    max-width: 100%;
  }
  #product .landing .section-content ul li {
    width: 100;
    max-width: 48;
  }
  #product .landing .section-content .capabilities-list {
    grid-template-columns: 1fr 1fr;
  }
  #product.landing ul {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  #product.landing ul li {
    width: 100%;
    max-width: 100%;
    min-height: unset;
  }
  #product section.product-hero {
    padding: 2rem;
  }
  #product section.product-content {
    padding: 0 3rem;
    gap: 3rem;
  }
  #product section.product-content #appmap-data-model-section h2 {
    font-size: 1.5rem;
  }
  #product section.product-content.horiz {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 3rem;
  }
  #product section.product-content.horiz.horiz-left, #product section.product-content.horiz.horiz-right {
    flex-direction: column;
    gap: 2rem;
  }
  #product section.product-content.horiz .section-content {
    width: 100%;
    max-width: 100%;
  }
  #product section.product-content.horiz img {
    max-width: 100%;
  }
  #product section.product-content.horiz video {
    max-width: 100%;
  }
  #product section.product-content.two-col {
    margin: 2rem 0;
    display: flex;
    flex-direction: column;
    padding: 3rem;
  }
  #product section.product-content.two-col .section-content {
    max-width: 100%;
    padding: 0;
  }
  #product section.product-content.one-col {
    flex-direction: column;
    gap: 2rem;
  }
  #product section.product-content.one-col img {
    max-width: 100%;
  }
  #product section.product-content.one-col .section-content {
    width: 100%;
    max-width: 100%;
  }
}
@media (max-width: 850px) {
  h2.stand-alone-header {
    margin-left: 2rem;
  }
  #product.analysis h1 {
    font-size: 3rem;
    line-height: 3.5rem;
  }
  #product .hero-cta {
    align-items: normal;
  }
  #product section.product-content.one-col {
    flex-direction: column;
    gap: 2rem;
    border-radius: 0;
    margin: 0 0 2rem 0;
  }
  #product section.product-content.two-col {
    flex-direction: column;
    gap: 2rem;
  }
  #product section.product-content.two-col .section-content {
    width: 100%;
    max-width: 100%;
  }
  #product section.product-content .three-col-wrap {
    display: flex;
    gap: 1rem;
  }
  #product section.product-content .three-col-wrap .col-item {
    width: 100%;
  }
  #product section.product-content .section-content {
    width: 100%;
    max-width: 100%;
  }
  #product section.product-content img {
    width: 100%;
    border-radius: 1rem;
  }
}
@media (max-width: 750px) {
  #product.analysis h1 {
    font-size: 3rem;
    line-height: 3rem;
  }
  #product .landing .section-content .capabilities-list {
    grid-template-columns: 1fr;
  }
  #product .landing .section-content .capabilities-list a {
    min-height: unset;
  }
  #product .landing .section-content .capabilities-list p {
    margin: 0;
  }
  #product #product section.product-hero .section-content.code-editor-img {
    height: 460px;
    max-height: 460px;
    background: url(/assets/img/product/appmap-in-code-editor-header-sm.webp);
    background-size: cover;
    position: relative;
    align-items: unset;
    padding-top: 3rem;
  }
}
@media (max-width: 700px) {
  #product section.product-hero .section-content.navie-img {
    height: fit-content;
  }
  #product ul.multi-list {
    columns: 2;
    line-height: 1.5rem;
    margin-bottom: 1rem;
    padding: 0px;
  }
  #product h2.subhead {
    line-height: 1.6rem;
    margin-bottom: 0;
  }
  #product .breadcrumb-wrap {
    display: none;
  }
  #product section.product-hero {
    padding: 0;
    border-radius: 0;
  }
  #product section.product-hero.landing {
    padding-top: 0px;
  }
  #product section.product-hero .section-content {
    border-radius: 0;
    margin: 0;
    padding: 0;
    gap: 0;
  }
  #product section.product-hero .section-content img {
    margin: 0;
    border-radius: 0;
  }
  #product section.product-hero .section-content video {
    border-radius: 0;
  }
  #product section.product-hero .section-content .content-wrap {
    padding: 1rem;
  }
  #product section.product-hero .section-content .hero-img {
    gap: 1rem;
  }
  #product section.product-hero .section-content .hero-img img {
    width: 2rem;
  }
  #product section.product-hero .section-content .hero-img h1.long-headline {
    font-size: 1.75rem;
    line-height: 2.5rem;
  }
  #product section.product-hero .landing .section-content ul {
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 100%;
  }
}
@media (max-width: 700px) and (max-width: 600px) {
  #product section.product-hero .section-content.gh-action-img {
    align-items: center;
  }
  #product section.product-hero .section-content .octocat-container {
    bottom: unset;
    right: 0;
    top: 0;
  }
  #product section.product-hero .section-content .octocat-container #octocat {
    transform: rotate(180deg);
    bottom: 0;
  }
}
@media (max-width: 700px) and (max-width: 500px) {
  /* repsonsive iphone fix */
  #product.analysis .section-content.landing .content-wrap {
    min-width: 100%;
  }
  section.product-content.two-col {
    padding: 2rem;
  }
  section.product-content.horiz.horiz-left {
    padding: 2rem;
  }
  section.product-content.horiz.horiz-right {
    padding: 2rem;
  }
  section.product-content.horiz.tuck {
    padding: 2rem;
  }
  section.product-content.tuck-more {
    padding-top: 2rem;
  }
  .landing .section-content {
    padding: 0 2rem;
  }
  .landing .section-content .section-content {
    border-radius: 0;
    padding: 0;
    margin: 0;
    gap: 1rem;
  }
  .landing .section-content .section-content img {
    margin: 0;
    border-radius: 0;
  }
  .landing .section-content .section-content .hero-img {
    gap: 1rem;
    margin-bottom: 0.5rem;
  }
  .landing .section-content .section-content .hero-img img {
    max-width: 2rem;
    max-height: 2rem;
  }
  .landing .section-content .section-content .content-wrap {
    margin-bottom: 0;
    padding: 2rem;
  }
  section.product-content.one-col {
    padding: 2rem;
  }
  section.product-content.two-col .section-content {
    padding: 0;
  }
  section.product-content .section-content {
    padding: 0;
  }
}
@media (max-width: 450px) {
  #product h1 {
    font-size: 2rem;
    line-height: 2.5rem;
  }
}
.feature-container {
  color: #e3e5e8;
  background: rgba(255, 255, 255, 0.0588235294);
  border-radius: 10px;
  display: block;
  box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.2);
  margin: 1rem;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  min-height: 900px;
}

.sub-feature {
  padding: 1rem 3rem 3rem 3rem;
  border-bottom: 1px solid #C242B1;
}
.sub-feature:last-child {
  border-bottom: 0px;
}
.sub-feature.text-content {
  padding: 0;
  max-width: 1200px;
  margin: 0 auto;
}
.sub-feature.text-content p {
  width: 100%;
  max-width: unset;
}
.sub-feature video {
  width: 75%;
  margin: 0.5rem 0;
  background-color: #010306;
}
.sub-feature p {
  width: 60%;
  margin: 1rem auto;
}
.sub-feature ul {
  width: 64%;
}
.sub-feature .btn {
  margin-top: 1rem;
}

@media (max-width: 992px) {
  .sub-feature {
    padding: 1rem 1rem 3rem 1rem;
  }
  .sub-feature video {
    width: 100%;
    margin: 0.5rem 0;
    background-color: #010306;
  }
  .sub-feature p {
    width: 100%;
  }
  .sub-feature ul {
    width: 100%;
  }
}
.how-it-works-steps {
  background-color: #220846;
  padding-bottom: 7rem;
}

@media (min-width: 900px) {
  #how-it-works-title {
    max-width: 75%;
  }
  .feature-content h2 {
    max-width: 75%;
  }
}
.blog-wrap {
  background: rgb(28, 19, 52);
  background: linear-gradient(180deg, #150f26 0%, #010303 60%);
  padding-top: 1rem;
  height: 100%;
  min-height: calc(100vh - 390px);
  margin-bottom: 4rem;
}

#blog-body {
  top: 0;
  left: 0;
  width: 100%;
  max-width: 1300px;
  height: 100%;
  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 2s; /* Firefox < 16 */
  -ms-animation: fadein 2s; /* Internet Explorer */
  -o-animation: fadein 2s; /* Opera < 12.1 */
  animation: fadein 2s;
}
#blog-body .alert-blog {
  width: 100%;
}
#blog-body .alert-blog p {
  font-size: 1rem;
  margin: auto;
}
#blog-body .alert-blog h4 {
  margin: auto;
}
#blog-body h1 {
  color: #E1E2E2;
  font-family: "Open Sans", sans-serif;
  font-size: 3rem;
  font-weight: 800;
  line-height: 3.5rem;
  max-width: 1000px;
  margin: 2rem auto;
}
#blog-body h1.blog-page-heading {
  color: #e3e5e8;
  max-width: 1400px;
  margin-bottom: 0.5rem;
  margin-top: 1rem;
}
#blog-body h2 {
  color: #E1E2E2;
}
#blog-body h2.blog-page-heading {
  color: #e3e5e8;
}
#blog-body img.post-image {
  width: 100%;
  border-radius: 0.5rem;
}
#blog-body .video-wrapper iframe {
  width: 100%;
  height: 100%;
  min-height: 400px;
}
#blog-body .capabilities-list {
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
  gap: 1rem;
  padding: 0;
}
#blog-body .capabilities-list a {
  border-radius: 1rem;
  border: 1px solid #1b1234;
  background-color: #1b1234;
  color: #955fca;
  padding: 1rem;
  width: 100%;
  margin: 0;
  min-height: 200px;
  transition: all 0.3s ease;
}
#blog-body .capabilities-list a h2 {
  color: #955fca;
}
#blog-body .capabilities-list a p {
  color: #e3e5e8;
}
#blog-body .capabilities-list a:hover {
  text-decoration: none;
  background-color: #150e29;
  border: 1px solid #955fca;
  color: #e3e5e8;
}
#blog-body .heading-icon {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: center;
}
#blog-body .heading-icon img {
  width: 2rem;
  height: 2rem;
  border-radius: 0;
}
#blog-body .post-content .highlight {
  border-radius: 4px;
}
#blog-body .post-content .no-border-margin {
  border: 0;
  margin: 1rem 0;
  border-radius: 4px;
}
#blog-body .post-title {
  color: #A277EE;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 2rem;
  text-transform: unset;
}
#blog-body .min-margin {
  margin: 2rem auto;
}
#blog-body .post-body h2 {
  margin-bottom: 0;
  color: #E1E2E2;
  font-size: 2rem;
  line-height: 2.4rem;
  font-weight: 600;
}
#blog-body .post-body h3 {
  text-transform: unset;
  font-weight: 600;
  margin-bottom: -1rem;
}
#blog-body .post-body h4.min {
  margin: 2rem auto 0 auto;
}
#blog-body .post-body p {
  max-width: 900px;
}
#blog-body .post-body ul {
  max-width: 850px;
  margin: 2rem 0;
}
#blog-body .post-body.form {
  background-color: #150f26;
  border-radius: 0.5rem;
}
#blog-body .post-content .chat {
  margin-top: 0px;
  margin-bottom: 0px;
}
#blog-body .post-content .chat .chat-icon {
  font-size: 2rem;
  margin-left: 0px;
  max-height: 4rem;
}
#blog-body .post-content .chat .chat-response {
  margin-left: 0px;
  margin-top: 1rem;
}
#blog-body .post-content .chat .chat-response ol {
  line-height: 1.75rem;
}
#blog-body .post-content .chat .chat-response li {
  line-height: 1.75rem;
}
#blog-body .post-content .chat pre.chat-diagram {
  background-color: #171924;
  color: white;
  margin-top: 1rem;
  font-size: 0.8rem;
}
#blog-body .post-content .chat .chat-code {
  color: #e83e8c;
  font-family: "Courier New", Courier, monospace;
  padding: 0.5rem;
  word-break: normal;
  font-weight: bold;
}
#blog-body .post-content .chat .code-container {
  background-color: black;
  max-width: 400px;
  overflow: scroll;
}
#blog-body .post-content .chat code[class*=language-], #blog-body .post-content .chat pre[class*=language-] {
  word-break: break-all;
  word-wrap: break-word;
  border: none;
  background-color: black;
}
#blog-body .post-content .navie-question {
  background-color: #21232e;
  border-radius: 1rem;
  padding: 1rem;
  max-width: 100%;
}
#blog-body .post-content .navie-question div, #blog-body .post-content .navie-question ul, #blog-body .post-content .navie-question ol, #blog-body .post-content .navie-question li, #blog-body .post-content .navie-question p {
  font-size: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  line-height: 1.75rem;
}
#blog-body .post-content .navie-answer {
  background-color: #21232e;
  border-radius: 1rem;
  padding: 1rem;
  max-width: 100%;
}
#blog-body .post-content .navie-answer .chat-icon img {
  border: 0px;
  display: inline-block;
  width: 2rem;
  margin-right: 0.5rem;
  margin-top: 0rem;
  margin-bottom: 0rem;
}
#blog-body .post-content .navie-answer div, #blog-body .post-content .navie-answer ul, #blog-body .post-content .navie-answer ol, #blog-body .post-content .navie-answer li, #blog-body .post-content .navie-answer p {
  font-size: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  line-height: 1.75rem;
}
#blog-body .post-excerpt {
  padding: 0 1rem;
  color: rgba(225, 226, 226, 0.6117647059);
  line-height: 1.65rem;
}
#blog-body .video-wrapper iframe {
  width: 100%;
  height: 100%;
  min-height: 400px;
}
#blog-body .series-list {
  border-radius: 1rem;
  border: 1px solid rgba(143, 129, 212, 0.7019607843);
  margin-bottom: 4rem;
  padding: 2rem;
  max-width: 100%;
}
#blog-body .series-list h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  margin-top: 0;
}
#blog-body .series-list ol {
  margin: 0;
}
#blog-body .series-list .series-active {
  font-weight: 800;
}
#blog-body .series-list .series-active a {
  color: #e3e5e8;
}
#blog-body.whitepapers .blog-post-list {
  grid-template-columns: 50% 50%;
}
#blog-body.whitepapers .blog-post {
  align-items: flex-start;
}
#blog-body.whitepapers .blog-post .post-controls {
  margin-top: 1rem;
}
#blog-body.whitepapers .resource-download {
  display: flex;
  flex-direction: row;
  gap: 4rem;
}
#blog-body.resources {
  max-width: 1200px;
}
#blog-body.resources h1 {
  margin: 0;
  font-size: 2.5rem;
  line-height: 3rem;
}
#blog-body.resources .cover-image {
  border-radius: 0.5rem;
  width: 100%;
}
#blog-body.resources .directions {
  margin: 0;
  font-size: unset;
  line-height: 1.4rem;
}
#blog-body.resources .post-body.form {
  margin: 3.5rem auto;
  padding: 1.5rem;
  width: 25%;
  min-width: 340px;
  height: max-content;
}
#blog-body.resources .post-body.form div {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
#blog-body.resources .subhead {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 1.5rem;
  color: #808b98;
  margin: 1.5rem 0 0.5rem 0;
}

span.inline-code {
  color: #837BCF;
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background-color: #1b1d1e;
  font-size: 87.5%;
  padding: 5px;
}

p.alert.alert-primary a {
  color: #004085;
  text-decoration: underline;
}

.social-media-links {
  display: flex;
  width: 100%;
  justify-content: center;
  gap: 20px;
}

body.cbd {
  background-image: url(../img/cbd/cbd-map-5b.png), linear-gradient(179.1deg, rgb(14, 78, 41) -4%, rgb(95, 215, 54) 98.3%);
}
body.cbd h1 {
  color: rgb(14, 78, 41);
  font-size: 5.5rem;
  margin: 1rem 0 0 0;
  text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  font-family: "Luckiest Guy", cursive;
}
body.cbd .post-content {
  background-color: rgba(255, 255, 255, 0.85);
  padding: 2rem;
  border-radius: 0.5rem;
  color: rgb(14, 78, 41);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
  margin-top: 3rem;
}
body.cbd .post-content a {
  color: #7330e9;
}
body.cbd .post-content p {
  margin: 1.5rem auto;
}
body.cbd .post-content ol {
  border: 4px solid rgb(38, 196, 104);
  border-radius: 1rem;
  padding: 1.5rem;
  list-style-position: inside;
}
body.cbd .post-content .post-meta {
  color: rgb(38, 196, 104);
  margin: 0 auto 0.25rem auto;
  font-size: 1rem;
}
body.cbd #blog-body {
  max-width: 900px;
}
body.cbd .community .slack-cta a {
  background-color: rgb(14, 78, 41);
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  margin-top: 2rem;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
}
body.cbd .community .slack-cta a h3 {
  margin: 0;
}
body.cbd .community .slack-cta a:hover {
  background-color: #167940;
}
body.cbd .community .slack-cta a:hover h3 {
  text-transform: none;
  color: white;
}

img.sm-img {
  border: none;
  max-width: 15rem;
  margin: 2rem 0;
}

section.cta {
  display: flex;
  justify-content: center;
}
section.cta .download-cta a {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  color: #e3e5e8;
  transition: all 0.3s ease;
}
section.cta .download-cta a img {
  width: 40px;
}
section.cta .download-cta a:hover {
  text-decoration: none;
  color: #4362b1;
}

.product-cta {
  background: -webkit-linear-gradient(45deg, #C242B1, #471f8e 100%);
  padding: 3rem;
  margin: 0;
}
.product-cta .section-content {
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-cta a {
  background-color: #010306;
  padding: 1rem 1.5rem;
  border-radius: 2rem;
  border: 2px solid #010306;
  color: #e3e5e8;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  font-weight: 800;
  transition: all 0.3s ease;
  min-width: 320px;
  text-align: center;
}
.product-cta a img {
  width: 1.5rem;
}
.product-cta a:hover {
  background-color: #e3e5e8;
  color: #010306;
  text-decoration: none;
}

@media (max-width: 992px) {
  #blog-body .section-content {
    padding: 3rem;
  }
  #blog-body .section-content ul {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    max-width: 100%;
  }
  #blog-body .section-content ul li {
    width: 100;
    max-width: 48;
  }
  #blog-body .section-content .capabilities-list {
    grid-template-columns: 1fr 1fr;
  }
  #blog-body.resources {
    padding: 1.3rem 3rem;
  }
  #blog-body.resources .resource-download {
    flex-direction: column;
  }
  #blog-body.resources .post-body.form {
    width: 80%;
    margin: 0 auto;
    min-width: unset;
  }
}
@media (max-width: 800px) {
  body.cbd h1 {
    font-size: 4.5rem;
  }
}
@media (max-width: 750px) {
  #blog-body .landing .section-content .capabilities-list {
    grid-template-columns: 1fr;
  }
  #blog-body .landing .section-content .capabilities-list a {
    min-height: unset;
  }
  #blog-body .landing .section-content .capabilities-list p {
    margin: 0;
  }
}
@media (max-width: 650px) {
  #blog-body .post-content .chat .chat-code {
    word-break: break-all;
  }
  body.cbd h1 {
    font-size: 3.5rem;
  }
}
@media (max-width: 550px) {
  #blog-body h1 {
    font-size: 2.5rem;
    line-height: 3rem;
  }
  #blog-body .post-body h2 {
    font-size: 1.75rem;
    line-height: 2.2rem;
  }
}
@media (max-width: 475px) {
  body.cbd h1 {
    font-size: 2.5rem;
  }
  body.cbd .post-content {
    padding: 1rem;
  }
  body.cbd .post-content .post-body p {
    font-size: 1.1rem;
  }
  body.cbd .post-content .post-meta {
    font-size: 0.9rem;
    margin-bottom: 0;
  }
  body.cbd .post-content ol li {
    font-size: 1.1rem;
  }
}
.highlight table td {
  padding: 5px;
}

.highlight table pre {
  margin: 0;
}

.highlight .c, .highlight .ch, .highlight .cd, .highlight .cpf {
  color: #837BCF;
  font-style: italic;
}

.highlight .cm {
  color: #837BCF;
  font-style: italic;
}

.highlight .c1 {
  color: #837BCF;
  font-style: italic;
}

.highlight .cp {
  color: #465457;
  font-weight: bold;
}

.highlight .cs {
  color: #465457;
  font-weight: bold;
  font-style: italic;
}

.highlight .err {
  color: #f8f8f2;
  background-color: #403d3d;
}

.highlight .gi {
  color: #a6e22e;
}

.highlight .gd {
  color: #f92672;
}

.highlight .ge {
  color: #1b1d1e;
  font-style: italic;
}

.highlight .gr {
  color: #f92672;
}

.highlight .gt {
  color: #f92672;
}

.highlight .gh {
  color: #403d3d;
}

.highlight .go {
  color: #403d3d;
}

.highlight .gp {
  color: #66d9ef;
}

.highlight .gs {
  font-weight: bold;
}

.highlight .gu {
  color: #465457;
}

.highlight .k, .highlight .kv {
  color: #66d9ef;
  font-weight: bold;
}

.highlight .kc {
  color: #66d9ef;
  font-weight: bold;
}

.highlight .kd {
  color: #66d9ef;
  font-weight: bold;
}

.highlight .kp {
  color: #66d9ef;
  font-weight: bold;
}

.highlight .kr {
  color: #66d9ef;
  font-weight: bold;
}

.highlight .kt {
  color: #66d9ef;
  font-weight: bold;
}

.highlight .kn {
  color: #f92672;
  font-weight: bold;
}

.highlight .ow {
  color: #f92672;
  font-weight: bold;
}

.highlight .o {
  color: #f92672;
  font-weight: bold;
}

.highlight .mf {
  color: #af87ff;
}

.highlight .mh {
  color: #af87ff;
}

.highlight .il {
  color: #af87ff;
}

.highlight .mi {
  color: #af87ff;
}

.highlight .mo {
  color: #af87ff;
}

.highlight .m, .highlight .mb, .highlight .mx {
  color: #af87ff;
}

.highlight e {
  color: #af87ff;
}

.highlight .sb {
  color: #dddb49;
}

.highlight .sc {
  color: #dddb49;
}

.highlight .sd {
  color: #dddb49;
}

.highlight .s2 {
  color: #dddb49;
}

.highlight .sh {
  color: #dddb49;
}

.highlight .si {
  color: #dddb49;
}

.highlight .sx {
  color: #dddb49;
}

.highlight .sr {
  color: #dddb49;
}

.highlight .s1 {
  color: #dddb49;
}

.highlight .ss {
  color: #dddb49;
}

.highlight .s, .highlight .sa, .highlight .dl {
  color: #dddb49;
}

.highlight .na {
  color: #7ea927;
}

.highlight .nc {
  color: #7ea927;
  font-weight: bold;
}

.highlight .nd {
  color: #7ea927;
  font-weight: bold;
}

.highlight .ne {
  color: #7ea927;
  font-weight: bold;
}

.highlight .nf, .highlight .fm {
  color: #7ea927;
  font-weight: bold;
}

.highlight .no {
  color: #66d9ef;
}

.highlight .bp {
  color: #837BCF;
}

.highlight .nb {
  color: #837BCF;
}

.highlight .ni {
  color: #837BCF;
}

.highlight .nn {
  color: #837BCF;
}

.highlight .vc {
  color: #837BCF;
}

.highlight .vg {
  color: #837BCF;
}

.highlight .vi {
  color: #837BCF;
}

.highlight .nv, .highlight .vm {
  color: #837BCF;
}

.highlight .w {
  color: #837BCF;
}

.highlight .nl {
  color: #837BCF;
  font-weight: bold;
}

.highlight .nt {
  color: #f92672;
}

.highlight {
  color: #837BCF;
  background-color: #1b1d1e;
}

section.testimonials {
  margin-bottom: 2rem;
  font-family: "Open Sans", sans-serif;
}
section.testimonials .section-header {
  margin-bottom: 0rem;
  width: 100%;
  max-width: 85%;
}
section.testimonials .section-header h2 {
  font-family: "Open Sans", sans-serif;
  font-size: 5rem;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.testimonials-block #user-testimonial-slides.carousel.slide .carousel-indicators {
  margin-top: 1rem;
}

.testimonials-block #user-testimonial-slides.carousel.slide .carousel-inner .carousel-item .testimonial-slide-wrap {
  font-size: 0.8rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.testimonials-block #user-testimonial-slides.carousel.slide .carousel-inner .carousel-item .testimonial-slide-wrap p {
  margin: 1rem 0;
}
.testimonials-block #user-testimonial-slides.carousel.slide .carousel-inner .carousel-item .testimonial-slide-wrap .callout {
  padding: 1rem 3rem;
  text-align: left;
  flex-basis: 0;
  flex-grow: 1;
  margin: 0;
  min-height: 350px;
}
.testimonials-block #user-testimonial-slides.carousel.slide .carousel-inner .carousel-item .testimonial-slide-wrap .callout ul {
  padding: 0;
}
.testimonials-block #user-testimonial-slides.carousel.slide .carousel-inner .carousel-item .testimonial-slide-wrap .callout .star-rating .material-icons {
  color: white;
  font-size: 2rem;
}
.testimonials-block #user-testimonial-slides.carousel.slide .carousel-inner .carousel-item .testimonial-slide-wrap .callout .review-source {
  color: white;
  display: flex;
  flex-direction: row;
  column-gap: 1.5rem;
}
.testimonials-block #user-testimonial-slides.carousel.slide .carousel-inner .carousel-item .testimonial-slide-wrap .callout .review-source .reviewer {
  font-size: 1rem;
}
.testimonials-block #user-testimonial-slides.carousel.slide .carousel-inner .carousel-item .testimonial-slide-wrap .callout .logo-xs {
  width: 35px;
  margin-bottom: 0.5rem;
}

#user-testimonial-slides {
  overflow: hidden;
}

@media (max-width: 1200px) {
  #youtube-badge {
    display: none;
  }
  section.testimonials .callout {
    margin: 0.5rem;
    padding: 1.5rem;
  }
}
@media (max-width: 992px) {
  .testimonials-block #user-testimonial-slides.carousel.slide .carousel-inner .carousel-item .testimonial-slide-wrap .callout {
    padding: 2rem 6rem;
    min-height: auto;
  }
  section.testimonials .testimonials-block {
    flex-direction: column;
  }
  section.testimonials .testimonials-block .callout {
    margin: auto;
    width: fit-contents;
  }
  .testimonials .section-content .section-header {
    margin-bottom: 0rem;
  }
}
.carousel-inner {
  height: 372px;
}

@media (max-width: 950px) {
  .carousel-inner {
    height: 844px;
  }
  #user-testimonial-slides {
    height: auto;
  }
  .testimonials-block #user-testimonial-slides.carousel.slide .carousel-inner .carousel-item .testimonial-slide-wrap {
    flex-direction: column;
  }
}
@media (max-width: 650px) {
  .carousel-inner {
    height: 1200px;
  }
  .testimonials-block #user-testimonial-slides.carousel.slide .carousel-inner .carousel-item .testimonial-slide-wrap .callout {
    padding: 3rem;
  }
  .testimonials .section-content .section-header {
    padding-bottom: 0;
  }
  .testimonials .section-content .section-header h2 {
    font-size: 4rem;
    line-height: 4.5rem;
  }
}
@media (max-width: 500px) {
  .testimonials .section-content .section-header h2 {
    font-size: 3rem;
    line-height: 3.5rem;
  }
}
@media (max-width: 380px) {
  .testimonials .section-content .section-header h2 {
    font-size: 2.5rem;
    line-height: 3rem;
  }
}
section.benefits {
  margin-bottom: 3rem;
}

.benefit {
  background: linear-gradient(180deg, #1c183d 33%, rgba(69, 98, 177, 0.4) 130%);
  min-height: 15rem;
}

.benefits .section-content {
  font-size: 16px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0rem 10rem;
  margin-top: 6rem;
}
.benefits .section-content h5 {
  line-height: 1.4;
}
.benefits .section-content p {
  margin: 1rem 0;
}
.benefits .section-content .callout {
  margin: 1rem;
  padding: 2.5rem 2.5rem 0rem 2.5rem;
  text-align: left;
  flex-basis: 0;
  flex-grow: 1;
}
.benefits .section-content .callout ul {
  padding: 0;
}

.benefits-condensed {
  margin: 1rem;
}

@media (max-width: 992px) {
  section.benefits {
    display: none;
  }
  .marketing.callout ul {
    text-align: left;
    list-style: none;
    padding: 0px;
  }
  .hero {
    margin-bottom: 0px;
  }
  .benefits-condensed hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 1px;
    border-top: 1px solid #C242B1;
  }
}
@media (max-width: 1200px) {
  .benefits .section-content {
    margin: 3rem 3rem 0rem 3rem;
  }
  .benefits .section-content .callout {
    margin: 0.5rem;
    padding: 1.5rem;
  }
}
@media (min-width: 992px) {
  section.benefits-condensed {
    display: none;
  }
}
.appmap-in-action, .get-a-demo {
  background: #3B388A;
  padding: 3rem;
  text-align: center;
  color: #e3e5e8;
}
.appmap-in-action h1, .get-a-demo h1 {
  text-shadow: 1px 1px rgba(0, 0, 0, 0.25);
  margin-bottom: 0rem;
}
.appmap-in-action p, .get-a-demo p {
  margin-top: 0rem;
}
.appmap-in-action .get-answers, .get-a-demo .get-answers {
  font-size: 0.9em;
}
.appmap-in-action .in-action-cta, .get-a-demo .in-action-cta {
  border-radius: 30px;
  padding: 1rem 3rem;
  margin-top: 1.5rem;
}

.get-a-demo h1 {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}
.get-a-demo img {
  width: 33px;
}

@media (max-width: 992px) {
  h1 {
    font-size: 1.5rem;
  }
}
.persona-benefits {
  background-color: #1b1234;
  padding-bottom: 7rem;
  padding-top: 2rem;
}

.persona-heading {
  margin-left: 10rem;
  display: flex;
  margin-top: 2rem;
}
.persona-heading h5 {
  text-transform: uppercase;
  color: #7f33cf;
  font-size: 1rem;
  letter-spacing: 0.125rem;
  align-self: center;
  padding: 0;
  margin: 0;
  margin-left: 1rem;
}

a.persona-link {
  color: #e3e5e8;
  transition: all 0.3s ease;
}
a.persona-link:hover {
  text-decoration: none;
  color: #808b98;
}

.persona-benefits-row {
  font-size: 16px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0rem 10rem 3rem 10rem;
}
.persona-benefits-row .benefit {
  margin: 1rem;
  padding: 2.5rem;
  text-align: left;
  flex-basis: 0;
  flex-grow: 1;
  min-height: fit-content;
  min-height: -moz-fit-content;
}
.persona-benefits-row .benefit p {
  line-height: 1.5rem;
}

.section-header {
  width: 50%;
  padding: 3rem;
}

@media (max-width: 992px) {
  .persona-benefits-row {
    flex-direction: column;
    margin: 0 3rem;
    font-size: 1rem;
  }
  .persona-benefits-row .benefit:last-child {
    margin-bottom: 3rem;
  }
  .section-header {
    width: 100%;
  }
  .persona-heading {
    margin-left: 5rem;
  }
}
@media (max-width: 1200px) {
  .persona-benefits-row {
    margin: 0 3rem;
  }
  .persona-heading {
    margin-left: 5rem;
  }
}
.secondary-benefits {
  background-color: #220846;
  padding-bottom: 7rem;
  padding-top: 7rem;
}

.secondary-benefits-row {
  font-size: 16px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0rem 10rem 0rem 10rem;
}
.secondary-benefits-row .benefit {
  margin: 1rem;
  padding: 3rem 5.5rem 3rem 3rem;
  text-align: left;
  flex-basis: 0;
  flex-grow: 1;
  min-height: fit-content;
}
.secondary-benefits-row .benefit p {
  line-height: 1.5rem;
}

.section-header {
  width: 50%;
  padding: 3rem;
}

.tag-cta {
  width: 100%;
  padding: 1rem 2rem;
  text-align: center;
}
.tag-cta p {
  width: fit-content;
  margin: auto;
}
.tag-cta a {
  margin-left: 0.25rem;
}
.tag-cta .bold-text {
  font-weight: 800;
}

@media (max-width: 992px) {
  .secondary-benefits-row {
    flex-direction: column;
    margin: 0 3rem;
    font-size: 1rem;
  }
  .section-header {
    width: 100%;
  }
}
@media (max-width: 1200px) {
  .secondary-benefits-row {
    margin: 0 3rem;
  }
  .persona-heading {
    margin-left: 5rem;
  }
}
.primary-cta-button {
  width: fit-content;
  width: -moz-fit-content;
  margin: auto;
  padding: 1rem;
}

.newsletter-cta {
  width: 100%;
  max-width: 30%;
  margin: 2rem 0;
}
.newsletter-cta.right-column {
  max-width: 100%;
  margin-bottom: 0;
}
.newsletter-cta .hbspt-form .hs-button {
  background-color: #C242B1;
}
.newsletter-cta .hbspt-form .hs_submit input {
  width: unset;
  font-size: 0.9rem;
}

@media (max-width: 850px) {
  .newsletter-cta {
    width: 100%;
    max-width: 100%;
  }
}
.features-section {
  background-color: #010306;
  padding-bottom: 7rem;
  max-width: unset;
  width: 100%;
}
.features-section .section-content {
  max-width: 1300px;
  margin: 0 auto;
}
.features-section.dark {
  background-color: #010306;
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.features-section-row {
  font-size: 16px;
  display: flex;
  flex-direction: row;
  margin: auto;
  width: fit-content;
  align-items: center;
}
.features-section-row .callout {
  margin-top: 0px;
}
.features-section-row img {
  max-width: 100%;
  padding: 0.5rem;
}
.features-section-row .illo {
  margin-left: 0px;
}
.features-section-row .illo-left {
  margin-right: 0px;
}
.features-section-row #dynamic-code-analyzer-illo {
  max-width: 70%;
}
.features-section-row .benefit {
  text-align: left;
  min-height: fit-content;
  background: transparent;
}
.features-section-row .benefit p {
  line-height: 1.5rem;
}
.features-section-row .caption-text.enterprise-feature, .features-section-row .caption-text-right.enterprise-feature {
  max-width: 35rem;
}
.features-section-row .caption-text {
  max-width: 25rem;
  padding-right: 0px;
}
.features-section-row .caption-text-right {
  margin-left: 0px;
  padding-left: 0px;
  max-width: 25rem;
}
.features-section-col {
  font-size: 16px;
  display: flex;
  flex-direction: column;
  margin: 7rem auto 0 auto;
  width: fit-content;
  align-items: center;
}

.cta-link {
  padding-top: 3rem;
}

.feature-container .iframe-solution {
  width: 50%;
  min-height: 5rem;
}

.enterprise.features-section {
  padding-top: 0px;
  padding-bottom: 0px;
}

.section-header {
  width: 70%;
  padding: 3rem;
}

.tag-cta {
  width: 100%;
  padding: 1rem 2rem;
  text-align: center;
}
.tag-cta p {
  width: fit-content;
  margin: auto;
}
.tag-cta a {
  margin-left: 0.25rem;
}
.tag-cta .bold-text {
  font-weight: 800;
}

@media (max-width: 992px) {
  .section-header {
    margin-bottom: 2rem;
  }
  .features-section-row {
    padding: 1rem;
    flex-direction: column-reverse;
    font-size: 1rem;
  }
  .features-section-row .marketing {
    padding: 0px;
  }
  .features-section-row .benefit {
    text-align: center;
    margin: auto;
    margin-bottom: 3rem;
  }
  .features-section-row svg {
    padding: 1rem;
  }
  .middle-feature {
    flex-direction: column;
  }
  .section-header {
    width: 100%;
  }
  .caption-text {
    margin-bottom: 3rem;
  }
  .caption-text p {
    padding: 0 1rem;
  }
  .illo {
    padding: 0px;
    text-align: center;
    margin: auto;
    margin-top: 3rem;
  }
  .features-section-row .illo-left {
    padding: 0px;
    text-align: center;
    margin: auto;
    margin-top: 3rem;
  }
  .caption-text-right {
    margin-bottom: 3rem;
  }
}
.become-a-contributor {
  background-color: #0c082a;
  padding: 2rem 4rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 2rem;
}
.become-a-contributor .section-content {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 3rem;
}
.become-a-contributor .section-content ul {
  list-style-type: none;
  padding: 0;
  font-size: 1rem;
  line-height: 2.25rem;
  margin-bottom: 0;
}
.become-a-contributor .section-content ul span {
  color: #C242B1;
}
.become-a-contributor .section-content ul li:first-of-type {
  border-bottom: 2px solid #C242B1;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}
.become-a-contributor .section-header {
  padding: 0;
  margin: 0;
  width: 100%;
}
.become-a-contributor.dark-purple-section {
  background-color: #1b1234;
}
.become-a-contributor p.small-heading-centered {
  width: fit-content;
  margin: auto;
  font-weight: bold;
}
.become-a-contributor .social {
  max-width: 600px;
  padding-bottom: 0rem;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin: 0;
}
.become-a-contributor .social a {
  margin: 0 2rem;
}
.become-a-contributor .social img {
  height: 100px;
  width: 100px;
}
.become-a-contributor .social .vl {
  border: 1px solid #e3e5e8;
  height: 140px;
}

@media (max-width: 1000px) {
  .become-a-contributor .section-content ul {
    font-size: 1.25rem;
    line-height: 2.25rem;
  }
  .become-a-contributor .section-content ul li {
    margin-bottom: 0;
  }
}
@media (max-width: 900px) {
  .become-a-contributor .section-content ul {
    font-size: 1.25rem;
    line-height: 2rem;
  }
}
@media (max-width: 777px) {
  .become-a-contributor {
    flex-direction: column;
    align-items: center;
  }
  .become-a-contributor section-content {
    padding-bottom: 0;
  }
  .become-a-contributor .section-header {
    width: 100%;
    padding: 0 0 3rem 0;
  }
  .become-a-contributor .section-header p {
    margin-bottom: 0;
  }
  .become-a-contributor .social {
    max-width: unset;
    width: 100%;
  }
}
.supported-platforms {
  padding-bottom: 7rem;
  background-color: #07041a;
}
.supported-platforms .section-header {
  max-width: 60%;
}

.platforms {
  background: black;
  width: 80%;
  border: 1px solid #e3e5e8;
  display: flex;
  justify-content: space-evenly;
  margin: auto;
}
.platforms .platform-box {
  height: 100%;
  flex: 1;
  border-right: 1px solid #e3e5e8;
}
.platforms .platform-box:last-of-type {
  border-right: 0;
}
.platforms .platform-box h5 {
  padding-top: 1rem;
  padding-left: 1rem;
}
.platforms .platform-box .platform-logo-container {
  max-height: 5rem;
  text-align: center;
}
.platforms .platform-box svg {
  max-height: 7rem;
  max-width: 5rem;
}
.platforms .platform-box table {
  width: 100%;
  margin-top: 5rem;
  margin-bottom: 1rem;
}
.platforms .platform-box tr {
  height: 2rem;
}
.platforms .platform-box td {
  padding-left: 2rem;
}
.platforms .platform-box .ruby-table tr:nth-child(odd) {
  background: rgba(38, 1, 8, 0.7803921569);
}
.platforms .platform-box .java-table tr:nth-child(odd) {
  background: rgba(20, 29, 37, 0.6784313725);
}
.platforms .platform-box .python-table tr:nth-child(odd) {
  background: rgba(59, 51, 22, 0.4117647059);
}
.platforms .platform-box .js-table tr:nth-child(odd) {
  background: rgba(82, 67, 14, 0.2);
}

.language-heading {
  margin-bottom: 0.5rem;
}
.language-heading h5 {
  text-transform: uppercase;
  color: white;
  font-size: 1rem;
  letter-spacing: 0.125rem;
  align-self: center;
  margin: auto;
  width: 80%;
}

.platform-container {
  width: 100%;
  margin: auto;
}

@media (max-width: 992px) {
  .platforms {
    flex-direction: column;
  }
  .platforms .platform-box {
    border-right: 0px;
  }
  .platforms .platform-box td {
    text-align: center;
    padding-left: 0px;
  }
  .platforms .platform-box:nth-child(2) {
    border-top: 1px solid white;
    border-bottom: 1px solid white;
  }
  .platforms .platform-box:nth-child(3) {
    border-bottom: 1px solid white;
  }
}
@media (max-width: 992px) {
  .supported-platforms .section-header {
    max-width: 100%;
  }
}
.dynamic-analysis {
  padding: 2rem 0 4rem 0;
}
.dynamic-analysis .primary-cta-button a {
  border-radius: 30px;
  padding: 1rem 3rem;
}
.dynamic-analysis svg {
  padding: 0 0 2px 0;
}
.dynamic-analysis svg path {
  fill: #C242B1;
}
.dynamic-analysis .icon-link a:hover {
  text-decoration: none !important;
}
.dynamic-analysis .icon-link a:hover svg path {
  fill: #889dd2;
}

.informational-content-group {
  padding: 1rem 3rem 0 3rem;
  margin: 0 auto;
}
.informational-content-group .page-heading {
  padding-left: 0;
  font-size: 3rem;
  line-height: 3.5rem;
  margin-top: 1rem;
}
.informational-content-group .psuedo-code {
  font-style: italic;
  max-width: 800px;
}
.informational-content-group .feature-container {
  margin: 0 auto;
  background-color: #1b1234;
  margin-bottom: 3rem;
  padding-top: 0rem;
}
.informational-content-group .feature-container h4 {
  margin-top: 2rem;
}
.informational-content-group .feature-container ol {
  list-style: none;
  padding-left: 0px;
}
.informational-content-group .feature-container ol li.security-answer {
  margin: 0rem;
  padding: 1rem;
  border-bottom: 1px solid #C242B1;
  transition: all 0.5s ease;
  margin: 1rem;
}
.informational-content-group .feature-container ol li.security-answer:last-child {
  border-bottom: 0px;
}
.informational-content-group .feature-container ol p.security-answer {
  max-width: 800px;
}
.informational-content-group .feature-container ol p.security-answer.last {
  margin-bottom: 3rem;
}

.compact-hero {
  background-color: #210546;
}
.compact-hero .foss-mini-heading {
  font-weight: bold;
  color: #925EEE;
}
.compact-hero .section-content {
  align-items: center;
}
.compact-hero .section-content.text-only-hero {
  margin-bottom: 0rem;
}
.compact-hero .section-content.no-image-hero {
  margin-bottom: 2rem;
}
.compact-hero .product-title {
  padding: 2.5rem 2rem;
  max-width: 1300px;
  margin: 0 auto;
}
.compact-hero .product-title h1 {
  font-size: 2.25rem;
  display: flex;
  max-height: 43px;
}
.compact-hero .product-title .product-icon {
  width: unset;
  height: 4.5rem;
  margin-right: 0.9rem;
  align-items: center;
}

.text-only-header-content {
  max-width: 750px;
}

/* cool color for later */
.compact-hero .teams-hero {
  background-color: #276591;
}

#enterprise-video {
  max-width: 100%;
}

.compact-hero .section-content {
  display: flex;
  flex-direction: row;
  padding: 3rem 2rem;
  margin: auto;
  margin-bottom: 5rem;
}
.compact-hero .section-content .primary-cta {
  margin-top: 0rem;
}
.compact-hero .section-content .primary-cta-button {
  margin: 0;
  padding: 0;
}
.compact-hero .section-content.sm-header {
  flex-direction: column;
}
.compact-hero .section-content .splash {
  width: fit-content;
  padding-left: 2rem;
}
.compact-hero .section-content .splash h1 {
  font-size: 45px;
  text-shadow: #010306 1px 1px 1px;
  word-wrap: break-word;
  line-height: 3rem;
}
.compact-hero .section-content .splash h1.title {
  font-size: 24px;
  color: #d7abff;
  margin-bottom: 0.5rem;
  text-shadow: none;
}
.compact-hero .section-content .splash h2 {
  font-size: 2.5rem;
}
.compact-hero .section-content .splash p {
  max-width: 50rem;
  line-height: 23px;
}
.compact-hero .section-content .splash .subhead {
  font-size: 28px;
  font-weight: 400;
  margin-top: 1;
  color: #e3e5e8;
}
.compact-hero .section-content .video-wrap {
  width: 35%;
}
.compact-hero .section-content .video-wrap img {
  max-width: 100%;
}
.compact-hero .section-content .video-wrap#teams-screenshot {
  width: 70%;
}
.compact-hero .section-content .video-wrap#enterprise-screenshot {
  width: 55%;
}

.compact-hero.main .section-content {
  padding-top: 0;
}

@media (max-width: 992px) {
  .compact-hero .section-content {
    flex-direction: column;
  }
  .compact-hero .section-content .splash {
    width: 100%;
    padding-left: 0;
    margin-top: 2rem;
    text-align: center;
  }
  .compact-hero .section-content .splash p {
    margin: 2rem auto;
  }
  .compact-hero .section-content .video-wrap {
    width: 100%;
  }
  .compact-hero .section-content .video-wrap#teams-screenshot {
    width: 100%;
  }
  .compact-hero .section-content .primary-cta-button {
    margin: auto;
  }
  .features-section-row .illo-left {
    margin-bottom: 3rem;
  }
}
#videos-header {
  margin: 2rem;
}

.container.video-list {
  padding: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 2rem;
  column-gap: 2rem;
  margin-top: 2rem;
}
.container.video-list h2 {
  grid-column-start: 1;
  grid-column-end: -1;
}

#blog-body {
  padding: 0 1rem;
  margin: 0 auto;
}
#blog-body .blog-post-list .blog-post {
  padding: 1.5rem;
}
#blog-body .video-wrapper {
  max-width: 800px;
  margin: 0 auto;
}

.video-item {
  padding: 2rem;
  border-radius: 0.5rem;
  border: 1px solid #d7abff;
}
.video-item h2 {
  color: #d7abff;
  font-size: 1.55rem;
  margin-bottom: 2rem;
}
.video-item p {
  color: #d7abff;
}

@media (max-width: 992px) {
  .container.video-list {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
  }
  .container.video-list .video-item {
    margin: 1rem;
  }
  h1 {
    font-size: 2.5rem;
  }
}
.video-tags .header-tag-list {
  padding-left: 2rem;
  padding-top: 0.5rem;
}
.video-tags .tag-list {
  padding-inline-start: 0px !important;
}
.video-tags .tag-list li {
  list-style: none;
  padding: 0.2rem 1rem;
  text-transform: capitalize;
  display: inline-block;
  border: 1px solid #808b98;
  color: #808b98;
  border-radius: 2rem;
  font-size: 0.9rem;
}
.video-tags .tag-list li .btn:active {
  border-style: outset;
  -moz-box-shadow: inset 0 0 0px white;
  -webkit-box-shadow: inset 0 0 0px white;
  box-shadow: inset 0 0 0px white;
}
.video-tags .tag-list li.tag-ruby {
  border-color: #CC342D;
}
.video-tags .tag-list li.tag-ruby a {
  color: #CC342D;
}
.video-tags .tag-list li.tag-java {
  border-color: #E76F00;
}
.video-tags .tag-list li.tag-java a {
  color: #E76F00;
}
.video-tags .tag-list li.tag-python {
  border-color: #FFC331;
}
.video-tags .tag-list li.tag-python a {
  color: #FFC331;
}
.video-tags .tag-list li.tag-node\.js {
  border-color: rgb(66, 126, 57);
}
.video-tags .tag-list li.tag-node\.js a {
  color: #FFC331;
}

.container.demos .feature-container {
  min-height: unset;
}
.container.demos .blog-post-list {
  max-width: unset;
  column-gap: 1.5rem;
  row-gap: 1.5rem;
}
.container.demos .blog-post-list .blog-post {
  padding: 1.5rem;
}
.container.demos .blog-post-list .blog-post h2 {
  font-size: 1.5rem;
}
.container.demos .blog-post-list .blog-post h2 a {
  color: #9C2FBA;
}

@media (max-width: 1100px) {
  .blog-post-list {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    column-gap: 1.5rem;
  }
}
@media (max-width: 900px) {
  .blog-post-list {
    display: flex;
    flex-direction: column;
  }
  .blog-post-list .blog-post {
    margin: 0;
  }
  #documentation .docs-content #related-blog-posts .blog-post img {
    max-width: 350px;
    display: block;
    margin: auto;
    margin-top: 1rem;
  }
}
.youtube-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}

.youtube-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

#company {
  padding: 1rem 3rem 0 3rem;
  margin: 0 auto;
}
#company .page-heading {
  padding-left: 0;
  font-size: 3rem;
  line-height: 3.5rem;
  margin-top: 1rem;
}
#company .feature-container {
  margin: 0 auto;
  background-color: #1b1234;
}
#company .feature-container .sub-feature {
  padding: 0;
}
#company .feature-container .sub-feature.text-content {
  width: 100%;
  max-width: 56rem;
  padding-bottom: 2rem;
}
#company .feature-container .sub-feature.text-content p {
  width: 100%;
  margin: 1rem 0;
}
#company .feature-container .sub-feature.text-content p:first-of-type {
  margin-top: 0;
}
#company .feature-container .sub-feature.team {
  display: flex;
  flex-wrap: wrap;
  max-width: 56rem;
  margin: 0 auto;
  gap: 1rem;
  padding: 3.5rem 0;
}
#company .feature-container .sub-feature.team .card {
  margin: 0rem;
  background-color: #010306;
  border-radius: 1rem;
  transition: all 0.5s ease;
}
#company .feature-container .sub-feature.team .card .card-body {
  display: flex;
  align-items: center;
}
#company .feature-container .sub-feature.team .card .card-body .card-title {
  margin: 0;
}
#company .feature-container .sub-feature.team .card .card-body .card-title a {
  color: #E1E2E2;
  transition: all 0.5s ease;
}
#company .feature-container .sub-feature.team .card .card-body .card-title a:hover {
  color: #C242B1;
  text-decoration: none;
}
#company .feature-container .sub-feature.team .card p {
  width: 100%;
  margin: 0px;
}
#company .feature-container .sub-feature.team .card .card-img-top {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
#company .feature-container .sub-feature.team .card:has(a:hover) {
  border: 1px solid #C242B1;
}

.founders {
  display: flex;
}
.founders .social {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 100%;
  width: 8rem;
}

.investors {
  padding: 2rem 0;
  max-width: 56rem;
  margin: 0 auto;
  width: 100%;
}
.investors .investor-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  background-color: black;
  border-radius: 5px;
  margin: 3rem 0;
}
.investors .investor-logos .investor-single {
  display: flex;
  justify-content: center;
  min-width: 25%;
  max-width: 12rem;
}
.investors .investor-logos .investor-single img {
  padding: 1rem;
  max-width: 100%;
  width: 18rem;
  transition: all 0.3s ease;
}
.investors .investor-logos .investor-single #argon {
  max-width: 9rem;
}
.investors .investor-logos .investor-single #dell, .investors .investor-logos .investor-single #uncorrelated {
  max-width: 10rem;
}
.investors .investor-logos .investor-single:hover {
  color: #4362b1;
  text-decoration: none;
}
.investors .investor-logos .investor-single:hover img {
  opacity: 0.5;
}

@media (max-width: 1075px) {
  #company .feature-container .sub-feature.team {
    justify-content: center;
    margin-bottom: 1rem;
  }
}
@media (max-width: 992px) {
  .founders {
    flex-direction: column;
  }
  .founders .social {
    width: 100%;
  }
  .investors {
    width: 100%;
    padding: 0;
  }
  .investors .investor-logos {
    padding-top: 3rem;
    flex-direction: column;
    justify-content: center;
  }
  .investors .investor-logos .investor-single {
    margin: auto;
    padding-bottom: 3rem;
  }
  .investors .investor-logos .investor-single img {
    display: block;
  }
  .investors .investor-logos .investor-single #argon {
    max-width: 10rem;
  }
}
@media (max-width: 700px) {
  #company {
    padding: 0 1.5rem;
  }
}
@media (max-width: 450px) {
  #company .page-heading {
    font-size: 4rem;
    line-height: 4.5rem;
  }
}
#ace-code-review-header.compact-hero {
  background-color: #010306;
}
#ace-code-review-header.compact-hero .section-content {
  display: flex;
  flex-direction: row;
  padding: 5rem 5rem 0rem 5rem;
  margin: auto;
  margin-bottom: 5rem;
}
#ace-code-review-header.compact-hero .section-content .svg-wrap {
  width: 60%;
  max-width: 500px;
}
#ace-code-review-header.compact-hero .section-content .svg-wrap img {
  width: 100%;
}

.blue-text {
  color: #4362b1;
}

.deep-purple-section {
  background-color: #220846;
  padding-top: 3rem;
  padding-bottom: 3rem;
  margin-top: 0rem;
}

.video-features-section {
  background-color: #1c183d;
  padding-bottom: 7rem;
  padding-top: 2rem;
}
.video-features-section .feature-container {
  padding: 1rem;
  background-color: rgba(255, 255, 255, 0);
  min-height: fit-content;
  max-width: 1000px;
  margin: auto;
}

.video-demo-cta {
  text-align: center;
  margin-top: 6rem;
}

#ace-your-code-review .features-section-row img, #ace-your-code-review .features-section-row svg {
  max-width: 100%;
}

#ace-code-review-works-with .subhead-cta {
  text-align: center;
  margin-top: 2rem;
}
#ace-code-review-works-with .platform-container {
  border: 4px solid #220846;
  border-bottom: 0;
  width: 80%;
}
#ace-code-review-works-with .platform-container .platforms {
  background: rgba(1, 3, 6, 0.95);
  border: none;
  width: unset;
}
#ace-code-review-works-with .platform-container .platforms .platform-box {
  border-right: 4px solid #220846;
}
#ace-code-review-works-with .platform-container .platforms .platform-box:last-of-type {
  border-right: 0;
}
#ace-code-review-works-with .platforms .platform-box .platform-logo-container {
  overflow: hidden;
  max-height: 10rem;
  margin-bottom: 1rem;
}
#ace-code-review-works-with .platforms .platform-box .platform-logo-container img.large {
  width: 200px;
}
#ace-code-review-works-with .platform-box {
  height: unset;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 10rem;
  border-bottom: 4px solid #220846;
}
#ace-code-review-works-with .platform-box img {
  width: 100px;
  max-height: 100px;
  margin: 0.5rem 0;
}
#ace-code-review-works-with .platform-box img.large {
  width: 150px;
}

@media (max-width: 992px) {
  #ace-code-review-header.compact-hero .section-content {
    flex-direction: column;
    padding: 3rem 2rem;
  }
  #ace-code-review-header.compact-hero .section-content .splash {
    width: 100%;
    padding-left: 0;
    margin-top: 2rem;
    text-align: center;
  }
  #ace-code-review-header.compact-hero .section-content .splash p {
    margin: 2rem auto;
  }
  #ace-code-review-header.compact-hero .section-content .video-wrap {
    width: 100%;
  }
  #ace-code-review-header.compact-hero .section-content .video-wrap#teams-screenshot {
    width: 100%;
  }
  #ace-code-review-header.compact-hero .compact-hero .section-content .primary-cta-button {
    margin: auto;
  }
  #ace-code-review-header.compact-hero .features-section-row .illo-left {
    margin-bottom: 3rem;
  }
}
@media (max-width: 992px) {
  #ace-code-review-works-with .platform-container .platforms .platform-box {
    border-right: 0;
  }
}
.container.support {
  box-sizing: border-box;
  max-width: 1400px;
  padding: 0 1rem;
}
.container.support .page-heading {
  margin-bottom: 0.25rem;
  font-size: 2rem;
}
.container.support .subhead {
  font-size: 1rem;
}
.container.support .support-block {
  border-radius: 0.5rem;
  min-height: 100px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 1.5rem 1.8rem;
  background-color: #171e2f;
  color: white;
  transition: background-color 0.2s ease-in;
}
.container.support .support-block:not(:last-child) {
  margin-bottom: 1rem;
}
.container.support .support-block--link:hover, .container.support .support-block--link:active {
  text-decoration: none;
  background-color: #343742;
  transition-timing-function: ease-out;
}
.container.support .support-block__icon {
  margin-right: 2rem;
  width: 50px;
  height: 50px;
}
.container.support .support-block .feature-container {
  margin: 0;
  display: block;
  width: 100%;
  min-height: auto;
  padding: 0;
  background: none;
  box-shadow: none;
}

@media (max-width: 1000px) {
  .container.support .support-block {
    min-height: auto;
  }
}
@media (max-width: 600px) {
  .container.support .support-block {
    padding: 1rem 1.2rem;
  }
  .container.support .support-block__icon {
    margin-right: 1rem;
    width: 30px;
    height: 30px;
  }
}
#community h2 {
  font-size: 2.25rem;
  line-height: 3rem;
  color: #E1E2E2;
}
#community section {
  margin: 0;
}
#community .community-hero {
  margin: 0;
  padding: 0 3rem;
}
#community .community-hero.compact-hero .section-content {
  max-width: 1400px;
  padding: 3rem 0;
  flex-direction: column;
  align-items: flex-start;
}
#community .community-hero.compact-hero .section-content .link-block {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
}
#community .community-hero.compact-hero h1 {
  font-size: 3rem;
  font-family: "Open Sans", sans-serif;
  font-weight: 800;
  text-transform: unset;
  margin-bottom: 0;
}
#community .community-content {
  display: flex;
  flex-direction: row;
  max-width: 1400px;
  margin: auto;
  padding: 3rem;
  gap: 2rem;
  justify-content: space-between;
}
#community .community-content .section-content {
  width: 100%;
  max-width: 1500px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
#community .community-text-block {
  margin: 0 0 2rem 0;
  padding: 0 0 2rem 0;
  border-bottom: 1px solid #1b1234;
}
#community .community-text-block.b-0 {
  border: none;
}
#community .community-text-block .sub-block {
  margin: 2rem 0;
}
#community .community-text-block .sub-block h3 {
  color: #E1E2E2;
  font-size: 1.5rem;
  text-transform: unset;
  font-weight: 700;
}
#community .community-sidebar {
  padding: 3rem 0;
}

#open-source-projects {
  background: -webkit-linear-gradient(45deg, #C242B1, #471f8e 100%);
  padding: 4rem;
}
#open-source-projects h1 {
  font-size: 3rem;
  line-height: 3.5rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
}
#open-source-projects .subhead {
  font-family: "Open Sans", sans-serif;
  font-size: 1.3 5rem;
  font-weight: 500;
  text-transform: unset;
  margin-bottom: 2rem;
}
#open-source-projects .github-projects {
  margin: 0;
  padding: 0;
  gap: 2rem;
}
#open-source-projects .github-projects .project-bubble {
  margin: 0;
}

#related-blog-posts {
  padding: 4rem;
}
#related-blog-posts h1 {
  font-size: 3rem;
  line-height: 3.5rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
}
#related-blog-posts .blog-post-list .blog-post {
  padding: 1rem 1.4rem 1rem 1.4rem;
  gap: 0.5rem;
  transition: all 0.5s ease;
}
#related-blog-posts .blog-post-list .blog-post .post-title {
  color: #E1E2E2;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 2rem;
  text-transform: unset;
  margin-top: 0.5rem;
  transition: all 0.5s ease;
}
#related-blog-posts .blog-post-list .blog-post .post-title:hover {
  text-decoration: none;
  color: #C242B1;
}
#related-blog-posts .blog-post-list .blog-post .post-exerpt {
  color: rgba(225, 226, 226, 0.6117647059);
  line-height: 1.65rem;
}
#related-blog-posts .blog-post-list .blog-post:has(a:hover) {
  border: 1px solid #C242B1;
}

.community-hero {
  background-image: url("../img/purple-community-folk.jpg");
  background-size: cover;
  height: 400px;
}

.community-text-block {
  margin: 0;
}
.community-text-block p {
  max-width: 600px;
}
.community-text-block a.btn.btn-lg-inline {
  margin-bottom: 0;
  border-radius: 3rem;
  padding: 0.5rem 1rem;
}

#appmap-framework-overview {
  padding: 3rem;
  max-width: 100%;
}

p.section-description {
  margin-top: 1.5rem;
}

.small-header {
  text-transform: uppercase;
  font-weight: bold;
}

.github-projects {
  margin: 1rem;
  padding: 1rem;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-content: space-evenly;
  flex-wrap: wrap;
}

.project-bubble {
  background-color: #010306;
  padding: 3rem;
  border-radius: 1rem;
  flex-basis: 80px;
  flex-grow: 1;
  margin: 1rem;
}
.project-bubble img {
  height: 100px;
  margin: auto;
}
.project-bubble img:nth-child(2) {
  margin-left: 2rem;
}

.sidebar {
  max-width: 350px;
}
.sidebar .sidebar-wrap {
  background-color: #1b1234;
  padding: 1rem;
  border-radius: 1rem;
}

.gh-project-image-container {
  width: fit-content;
  max-width: 100%;
  margin: auto;
  margin-bottom: 2rem;
  display: flex;
}

.btn-lg-inline img {
  width: 30px;
  margin: 5px;
}

.section-header-sm {
  margin: 1rem;
}

#feedback-button-icon {
  font-size: 30px;
  color: #806be6;
  padding: 4px;
}

@media (max-width: 1000px) {
  #community .community-content {
    flex-direction: column;
  }
  #community .sidebar {
    width: 100%;
    max-width: 100%;
  }
  #community .newsletter-cta.right-column {
    margin: 1rem 0 0 0;
  }
}
@media (max-width: 992px) {
  .community-content, .github-projects {
    flex-direction: column;
    padding: 1rem;
  }
  .community-text-block {
    margin-right: 0px;
  }
}
@media (max-width: 750px) {
  .btn-lg-inline {
    width: 100%;
  }
}
@media (max-width: 650px) {
  #community .community-hero.compact-hero h1 {
    font-size: 4rem;
    line-height: 4.5rem;
  }
  #community h2 {
    font-size: 2.5rem;
    line-height: 3rem;
  }
  #community .community-content {
    padding: 1.5rem;
  }
  #community #open-source-projects, #community #related-blog-posts {
    padding: 1.5rem;
  }
  #community #open-source-projects h1, #community #related-blog-posts h1 {
    font-size: 4rem;
    line-height: 4.5rem;
  }
}
@media (max-width: 530px) {
  #community .community-hero.compact-hero {
    height: unset;
  }
  #community .community-hero.compact-hero h1 {
    font-size: 3.35rem;
    line-height: 4rem;
  }
  #community .community-hero.compact-hero .section-content {
    margin: 0;
  }
  #community .community-hero.compact-hero .section-content .link-block {
    flex-direction: column;
    gap: 1rem;
  }
  #community #open-source-projects h1, #community #related-blog-posts h1 {
    font-size: 3rem;
    line-height: 3.5rem;
  }
  #community #open-source-projects h2, #community #related-blog-posts h2 {
    font-size: 2rem;
    line-height: 2.3rem;
  }
}
@media (max-width: 450px) {
  #community .community-hero.compact-hero h1 {
    font-size: 2.75rem;
    line-height: 3.25rem;
  }
}
@media (min-width: 1500px) {
  .community-content.one-col {
    width: fit-content;
  }
}
#home-body.landing hr {
  background-color: rgba(60, 49, 118, 0.7);
  max-width: 1200px;
  margin: 0 auto;
}
#home-body.landing section {
  padding: 2rem 4rem;
}
#home-body.landing section.landing-content {
  padding: 2rem 4rem;
  background-color: #1b1531;
}
#home-body.landing .section-content h1 {
  font-weight: 800;
  font-size: 3rem;
  text-shadow: 0px 0px 10px rgba(15, 11, 18, 0.4588235294);
}
#home-body.landing .section-content p {
  max-width: 50%;
}
#home-body.landing .section-content .overview {
  display: flex;
  flex-direction: row-reverse;
  gap: 2rem;
  margin: 3rem auto 0 auto;
  background-color: #1e112e;
  padding: 2rem;
  border-radius: 0.5rem;
}
#home-body.landing .section-content .overview p {
  max-width: unset;
}
#home-body.landing .section-content .overview video {
  max-width: 50%;
  border-radius: 0.5rem;
}
#home-body.landing .figure-wrap {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  margin-bottom: 2rem;
}
#home-body.landing .figure-caption {
  background-color: #1e112e;
  border-radius: 0.5rem;
  color: #978ca4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 100%;
  width: 50%;
  padding: 0;
  margin: 2rem 0;
  gap: 0.2rem;
}
#home-body.landing .figure-caption p {
  width: 100%;
  max-width: 100%;
}
#home-body.landing .figure-caption img {
  width: 100%;
  border-radius: 0;
}
#home-body.landing .figure-caption img.logo-small {
  width: 45px;
  margin-right: 1rem;
}
#home-body.landing .figure-caption .caption-ide {
  padding: 2rem 2rem 0 2rem;
}
#home-body.landing .figure-caption .caption-ide .caption {
  margin: 0;
}
#home-body.landing .figure-caption .ide-name {
  align-items: center;
  margin-bottom: 0.75rem;
}
#home-body.landing .figure-caption .ide-name span {
  font-size: 1.2rem;
  font-weight: 800;
  color: #e3e5e8;
}
#home-body.landing .figure-caption .buy-it-now {
  width: 100%;
  margin-bottom: 1rem;
}
#home-body.landing .figure-caption .price-block {
  display: block;
  font-size: 2rem;
  font-weight: bold;
  color: white;
  text-align: center;
  padding: 1rem;
}
#home-body.landing .figure-caption .small-bold-header {
  display: block;
  margin-bottom: 1rem;
  font-weight: bold;
  color: white;
}
#home-body.landing .landing-feature h3 {
  margin-bottom: 1.5rem;
}
#home-body.landing .landing-video h2, #home-body.landing .landing-video h3 {
  width: 100%;
  margin-bottom: 2rem;
}
#home-body.landing .landing-video .feature-container {
  padding: 0;
  margin: 0 0 1rem 0;
  border-radius: 1rem;
  background: none;
  align-items: center;
  min-height: unset;
  box-shadow: none;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
#home-body.landing .early-access-cta {
  background-color: rgba(60, 49, 118, 0.7);
  border-radius: 1.25rem;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  transition: all 0.3s ease;
}
#home-body.landing .early-access-cta ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#home-body.landing .early-access-cta ul li {
  margin: 1rem 0;
}
#home-body.landing .early-access-cta h4 {
  margin-bottom: 1rem;
}
#home-body.landing .early-access-cta strong {
  color: #e3e5e8;
}
#home-body.landing .early-access-cta .support-list {
  display: flex;
  flex-direction: column;
  margin-top: 0;
  margin-bottom: 1rem;
}
#home-body.landing .early-access-cta .support-list li {
  display: flex;
  align-items: center;
  gap: 0.12rem;
  margin-bottom: 0;
  margin-top: 0.25rem;
}
#home-body.landing .early-access-cta .support-list li.hidden {
  display: none;
}
#home-body.landing img.cta-logo {
  width: 25px;
  margin: 0 0.25rem;
}
#home-body.landing .btn-slack {
  align-items: center;
  border-radius: 1rem;
  background-color: #010306;
  border: 1px solid #010306;
  color: #e3e5e8;
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  padding: 0.75rem;
  transition: all 0.3s ease;
}
#home-body.landing .btn-slack img {
  width: 40px;
  transition: all 0.3s ease;
}
#home-body.landing .btn-slack span {
  text-align: left;
  font-size: 1.3rem;
  line-height: 1.75rem;
}
#home-body.landing .btn-slack:hover {
  background-color: #010306;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
  border-color: rgba(143, 129, 212, 0.7019607843);
  color: rgba(211, 203, 245, 0.7019607843);
}
#home-body.landing .btn-slack:hover img {
  opacity: 0.8;
}
#home-body.landing .landing-hero {
  background: linear-gradient(180deg, #1b1531 33%, #010306 100%);
  min-height: 300px;
  display: flex;
  align-items: center;
  padding: 4rem 4rem;
}
#home-body.landing .landing-hero .hero-wrap {
  display: flex;
  flex-direction: row;
  gap: 6rem;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
#home-body.landing .landing-hero .hero-wrap .summary {
  display: flex;
  flex-direction: column;
  width: 60%;
}
#home-body.landing .landing-hero .hero-wrap .summary p, #home-body.landing .landing-hero .hero-wrap .summary ul, #home-body.landing .landing-hero .hero-wrap .summary li {
  color: rgba(237, 236, 243, 0.7);
}
#home-body.landing .landing-hero .hero-wrap .summary p {
  margin: 0;
}
#home-body.landing .landing-hero .hero-wrap .summary h1 {
  margin-bottom: 1.5rem;
}
#home-body.landing .landing-hero .hero-wrap .summary h3 {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
}
#home-body.landing .landing-hero .hero-wrap .summary .subheading {
  font-size: 1.2rem;
  line-height: 2rem;
  font-weight: 300;
}
#home-body.landing .landing-hero .btn.cta {
  background-color: #150727;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
}
#home-body.landing .landing-hero .btn.cta:hover {
  background-color: #0b0315;
}
#home-body.landing .landing-hero .hero-cta-wrap {
  margin-top: 0;
}
#home-body.landing .landing-hero .stack {
  display: flex;
  flex-direction: column;
}
#home-body.landing .landing-feature {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6rem;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 0;
}
#home-body.landing .landing-feature.min-pad {
  padding: 2rem 0;
}
#home-body.landing .landing-feature ul strong {
  color: rgba(136, 122, 203, 0.7019607843);
}
#home-body.landing .landing-feature ul li {
  margin-bottom: 0.25rem;
}
#home-body.landing .landing-feature ul li ul li {
  margin-bottom: 0;
}
#home-body.landing .landing-feature .content-wrap {
  width: 60%;
}
#home-body.landing .landing-feature .content-wrap.full {
  width: 100%;
  justify-content: center;
}
#home-body.landing .landing-feature .cta-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 35%;
}
#home-body.landing .landing-feature .split-cta {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
#home-body.landing .landing-feature .split-cta a {
  border-color: rgba(136, 122, 203, 0.7019607843);
  border-radius: 1rem;
}
#home-body.landing .landing-feature .early-access-cta strong {
  color: #e3e5e8;
}
#home-body.landing .landing-feature.centered .content-wrap {
  width: unset;
  margin: 0 auto;
  text-align: left;
}
#home-body.landing .med-img {
  width: 100%;
  max-width: 500px;
  margin-bottom: 2rem;
}

.t-and-c {
  display: flex;
  align-items: center;
  color: #808b98;
}

.cols, .wrap.rows {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  width: inherit;
}

.wrap.rows {
  margin: 0 auto;
  padding: 4rem 0;
}

.btn.cta {
  border: 1px solid #925EEE;
  border-radius: 0.5rem;
  padding: 1rem;
  display: flex;
  flex-direction: row;
  color: #e3e5e8;
  width: 230px;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
.btn.cta img {
  width: 40px;
}
.btn.cta:hover {
  border-color: #b18cf3;
}

.button-label {
  display: flex;
  align-items: center;
  padding-left: 1rem;
}

@media (max-width: 1200px) {
  #home-body.landing.talk-to-an-expert .landing-hero .section-content {
    width: 100%;
  }
  #home-body.landing.talk-to-an-expert .landing-hero .section-content .wrap {
    width: unset;
  }
  #home-body.landing.talk-to-an-expert .landing-hero .section-content.cols, #home-body.landing.talk-to-an-expert .landing-hero .section-content.wrap.rows {
    flex-direction: row;
  }
  #home-body.landing .landing-hero {
    height: unset;
    padding: 2rem 4rem;
  }
  #home-body.landing .landing-hero .section-content {
    flex-direction: column;
    width: 100%;
    max-width: 800px;
    gap: 2rem;
  }
  #home-body.landing .landing-hero .section-content .summary {
    padding: 0;
  }
  #home-body.landing .landing-hero .section-content .early-access-cta {
    width: 100%;
  }
  #home-body.landing .landing-hero .section-content .btn-slack {
    width: 100%;
  }
  #home-body.landing .section-content .figure-caption p {
    max-width: 100%;
  }
  #home-body.landing .section-content p {
    width: 100%;
    max-width: 100%;
  }
}
@media (max-width: 1000px) {
  #home-body.landing .section-content .figure-caption {
    width: 100%;
  }
  #home-body.landing .section-content .figure-wrap {
    flex-direction: column;
    gap: 0;
  }
  #home-body.landing .section-content .figure-wrap figure {
    margin: 0;
  }
  #home-body.landing .landing-hero .hero-wrap {
    flex-direction: column;
    gap: 1rem;
  }
  #home-body.landing .landing-hero .hero-wrap .summary {
    width: 100%;
  }
  #home-body.landing .landing-hero .early-access-cta {
    margin-top: 1rem;
  }
  #home-body.landing .early-access-cta .support-list {
    flex-direction: row;
    gap: 0.5rem;
    float: left;
  }
  #home-body.landing .early-access-cta .support-list li {
    margin-top: 0;
  }
  #home-body.landing .early-access-cta .support-list li.hidden {
    display: unset;
  }
  #home-body.landing .landing-feature {
    flex-direction: column;
    gap: 1rem;
  }
  #home-body.landing .landing-feature .content-wrap, #home-body.landing .landing-feature .cta-wrap {
    width: 100%;
  }
  #home-body.landing .landing-feature .hidden-bit br {
    display: none;
  }
}
@media (max-width: 885px) {
  #home-body.landing .section-content p {
    max-width: 100%;
  }
}
@media (max-width: 815px) {
  #home-body.landing.talk-to-an-expert .landing-hero .section-content.cols, #home-body.landing.talk-to-an-expert .landing-hero .section-content.wrap.rows {
    flex-direction: column;
    align-items: flex-start;
  }
  #home-body.landing .landing-hero {
    padding: 2rem 4rem;
  }
  #home-body.landing .landing-hero .section-content {
    gap: 0.5rem;
  }
  #home-body.landing .landing-hero .section-content .summary {
    width: 100%;
    max-width: 100%;
  }
  #home-body.landing .landing-video {
    padding: 2rem 0;
  }
  #home-body.landing .landing-video .feature-container {
    padding: 0;
  }
}
@media (max-width: 800px) {
  #home-body.landing .early-access-cta {
    width: 75%;
    margin: 0 auto;
  }
  #home-body.landing .early-access-cta .support-list {
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  #home-body.landing .early-access-cta .support-list li {
    margin-top: 0;
  }
  #home-body.landing .early-access-cta .support-list li.hidden {
    display: none;
  }
  #home-body.landing .landing-hero .early-access-cta {
    margin-top: 1rem;
  }
}
@media (max-width: 740px) {
  #home-body.landing .landing-hero .section-content {
    padding: 0;
  }
  #home-body.landing .btn.cta {
    width: 100%;
  }
}
@media (max-width: 735px) {
  #home-body.landing .section-content p {
    max-width: 88%;
  }
}
@media (max-width: 680px) {
  #home-body.landing .section-content h2 br {
    display: none;
  }
  #home-body.landing .section-content p {
    width: 100%;
  }
}
@media (max-width: 640px) {
  #home-body.landing .landing-hero .early-access-cta {
    padding: 1rem;
  }
}
@media (max-width: 587px) {
  #home-body.landing .section-content p {
    max-width: 100%;
  }
}
@media (max-width: 580px) {
  #home-body.landing .wrap.rows {
    flex-direction: column;
  }
  #home-body.landing .landing-hero {
    padding: 2rem;
  }
  #home-body.landing .landing-hero .section-content {
    gap: 1.5rem;
  }
  #home-body.landing .landing-content {
    padding: 1rem;
  }
}
@media (max-width: 528px) {
  #home-body.landing .section-content p {
    max-width: 92%;
  }
}
@media (max-width: 467px) {
  #home-body.landing .section-content p {
    max-width: 100%;
  }
}
@media (max-width: 440px) {
  #home-body.landing .section-content p {
    max-width: 90%;
  }
}
@media (max-width: 400px) {
  #home-body.landing .section-content p {
    max-width: 100%;
  }
}
@media (max-width: 377px) {
  #home-body.landing .section-content p {
    max-width: 93%;
  }
}
@media (max-width: 357px) {
  #home-body.landing .section-content p {
    max-width: 100%;
  }
}
#pricing {
  width: 100%;
  padding: 3rem;
  background: rgb(28, 19, 52);
  background: linear-gradient(180deg, #150f26 0%, #010303 60%);
  margin-bottom: 3rem;
  font-family: "Open Sans", sans-serif;
}
#pricing .pricing-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
#pricing .static-text {
  display: block;
}
#pricing .phone-link {
  display: none;
}
#pricing h1 {
  font-family: "Open Sans", sans-serif;
  font-weight: 800;
  font-size: 3rem;
  line-height: 3.5rem;
  margin: 0 auto 3rem auto;
  width: 100%;
  max-width: 1200px;
}
#pricing h2 {
  font-family: "Open Sans", sans-serif;
  font-weight: 800;
  font-size: 2rem;
}
#pricing .tiers {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  width: 100%;
}
#pricing .tiers .tier {
  background-color: #1b1234;
  border-radius: 1rem;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.08);
}
#pricing .tiers .tier.beta {
  background: -webkit-linear-gradient(45deg, #C242B1, #471f8e 100%);
}
#pricing .tiers .tier.beta h2 {
  color: #e3e5e8;
}
#pricing .tiers .tier.beta li {
  text-shadow: 0px 0px 15px #221840;
}
#pricing .tiers .tier.beta .btn.btn-primary {
  background-color: #1b1234;
  border-radius: 2rem;
}
#pricing .tiers .tier.beta .btn.btn-primary:hover {
  background-color: #e3e5e8;
  color: #010306;
}
#pricing .tiers .tier.beta .tier-heading {
  border-color: rgba(227, 229, 232, 0.4196078431);
}
#pricing .tiers .tier .card {
  background: none;
  padding: 1.5rem;
  color: rgba(227, 229, 232, 0.9019607843);
  height: 100%;
  justify-content: space-between;
}
#pricing .tiers .tier h2 {
  font-size: 2.5rem;
  font-weight: 800;
  color: #a277ef;
  font-family: "Open Sans", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
}
#pricing .tiers .tier a {
  color: #e3e5e8;
}
#pricing .tiers .tier a:hover {
  text-decoration: none;
}
#pricing .tiers .tier a:active {
  border: 0;
}
#pricing .tiers .tier a:focus {
  border: 0;
}
#pricing .tiers .tier .tier-heading {
  border-bottom: 1px solid #493585;
  display: flex;
  flex-direction: column;
  padding: 0 0 1rem 0;
  gap: 0.3rem;
}
#pricing .tiers .tier .tier-heading h2, #pricing .tiers .tier .tier-heading h3 {
  margin: 0;
}
#pricing .tiers .tier .tier-heading h3.price {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-family: "IBM Plex Sans", sans-serif;
}
#pricing .tiers .tier .tier-heading h3.price span {
  font-size: 1rem;
  margin-left: 0.2rem;
  margin-bottom: 0.35rem;
}
#pricing .tiers .tier .tier-list {
  list-style-image: url("/assets/img/check-circle-fill.svg");
  padding-left: 1.5rem;
  margin-top: 0.75rem;
  font-size: 0.95rem;
}
#pricing .tiers .tier .tier-list li {
  line-height: 1.2rem;
  margin: 0.5rem 0;
}
#pricing .tiers .tier .tier-list li img {
  margin-right: 0.25rem;
}
#pricing .tiers .btn {
  margin-top: 1rem;
  border-radius: 2rem;
  background: none;
  border: 1px solid #C242B1;
}
#pricing .tiers .btn:hover {
  background-color: #e3e5e8;
  color: #010306;
  border-color: #e3e5e8;
}
#pricing .tiers .tier-cta-split {
  display: flex;
  gap: 1rem;
  flex-direction: column;
}
#pricing .tiers .tier-cta-split .btn.split {
  display: flex;
  flex-direction: row;
  gap: 1.25rem;
  justify-content: center;
  text-align: left;
  margin-top: 0;
}
#pricing .tiers .tier-cta-split .btn.split img {
  width: 2.25rem;
  text-shadow: 0px 0px 15px #221840;
}
#pricing .tiers .tier-cta-split .btn.split:hover {
  background-color: #e3e5e8;
  color: #010306;
  border-color: #e3e5e8;
}
#pricing .tiers a.light-pink-link {
  text-decoration: underline;
  color: #d99ce7;
}
#pricing i.uses-appland-service {
  font-size: 1rem;
  margin-right: 2px;
}
#pricing .feature-legend {
  color: #808b98;
}
#pricing .feature-comparison {
  margin-top: 3.5rem;
}
#pricing .feature-comparison .feature-table-desc {
  display: block;
  line-height: 1.5rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
}
#pricing .feature-comparison .feat-sub-item {
  color: #7a787b;
  margin-left: 1rem;
  display: block;
}
#pricing .feature-comparison .feat-sub-item:last-child {
  margin-bottom: 1rem;
}
#pricing .feature-comparison .comparison-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#pricing .feature-comparison .comparison-section h2.col, #pricing .feature-comparison .comparison-section .feature-name.col {
  text-align: left;
  line-height: 1.5rem;
  margin: 0;
  padding: 0;
}
#pricing .feature-comparison .comparison-section h2.col.multi-feature-item, #pricing .feature-comparison .comparison-section .feature-name.col.multi-feature-item {
  margin-top: 1rem;
}
#pricing .feature-comparison .comparison-section .col {
  flex-basis: 33%;
  flex-grow: 1;
  text-align: center;
  margin-bottom: 0;
}
#pricing .feature-comparison .comparison-section .col .tableheader {
  display: none;
}
#pricing .feature-comparison .comparison-section .col.yes {
  color: rgb(152, 213, 247);
}
#pricing .feature-comparison .comparison-section .col.no {
  color: #808b98;
}
#pricing .feature-comparison .comparison-section .col.beta {
  color: #a277ef;
}
#pricing .feature-comparison .comparison-section.heading {
  border-bottom: 2px solid #2b1f4e;
}
#pricing .feature-comparison .comparison-section.heading ul li {
  margin: 0;
}
#pricing .feature-comparison .comparison-section.feature-item {
  border-bottom: 1px solid #171e2f;
  line-height: 3.5rem;
}
#pricing .feature-comparison .comparison-section.feature-item.multi-feature-group {
  border: 0px;
}
#pricing .feature-comparison .comparison-section.feature-item.b-0 {
  border: none;
}

.open-source-note {
  background: -webkit-linear-gradient(45deg, #C242B1, #471f8e 100%);
  padding: 3rem;
  margin: 0;
}
.open-source-note .alert.alert-appmap-style {
  background: #010306;
  padding: 1.25rem 1.5rem;
  border: 1px solid rgba(98, 56, 140, 0.75);
  border-radius: 1rem;
  width: 100%;
  margin-bottom: 0px;
}
.open-source-note .alert.alert-appmap-style h4 {
  font-size: 2.5rem;
  font-weight: 800;
  color: #a277ef;
  font-family: "Open Sans", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
}
.open-source-note .section-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1220px) {
  #pricing .tiers {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
}
@media (max-width: 992px) {
  #pricing {
    height: unset;
  }
  #pricing .tiers {
    gap: 1rem;
  }
  #pricing .tier-list li {
    margin: 0;
  }
}
@media (max-width: 900px) {
  #pricing .feature-comparison .feature-name h2 {
    font-size: 1.5rem;
  }
}
@media (max-width: 560px) {
  #pricing {
    padding: 1rem;
  }
  #pricing h1 {
    margin-top: 1.5rem;
  }
  #pricing .static-text {
    display: none;
  }
  #pricing .phone-link {
    display: block;
  }
  #pricing .feature-comparison {
    overflow-x: scroll;
    margin: 1rem;
  }
  #pricing .feature-comparison .comparison-section.heading {
    align-items: flex-end;
  }
  #pricing .feature-comparison .comparison-section.heading .col {
    font-size: 0.9rem;
    max-width: unset;
    width: 100%;
    margin-bottom: 0;
    padding: 0;
  }
  #pricing .feature-comparison .comparison-section.heading .col.tableheader {
    display: none;
  }
  #pricing .feature-comparison .comparison-section.heading .feature-name h2 {
    font-size: 2rem;
    width: 100%;
  }
  #pricing .feature-comparison .comparison-section.heading .feature-name.col {
    min-width: 100px;
    font-size: 0.9rem;
  }
  #pricing .feature-comparison .comparison-section.feature-item {
    padding: 0.5rem 0;
    flex-direction: column;
  }
  #pricing .feature-comparison .comparison-section.feature-item .col {
    width: 100%;
    max-width: unset;
    margin-bottom: 0;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    color: #808b98;
    line-height: 1.8rem;
  }
  #pricing .feature-comparison .comparison-section.feature-item .col .feature-table-desc {
    color: rgb(152, 213, 247);
    max-width: 50%;
    text-align: right;
  }
  #pricing .feature-comparison .comparison-section.feature-item .col .tableheader {
    display: unset;
  }
  #pricing .feature-comparison .comparison-section.feature-item .col .tableheader.beta {
    color: #a277ef;
  }
  #pricing .feature-comparison .comparison-section.feature-item .col.feature-name {
    width: 100%;
    max-width: unset;
    font-weight: 700;
    color: #e3e5e8;
  }
  #pricing .feature-comparison .comparison-section.feature-item .col.feature-name.multi-feature-item {
    flex-direction: column;
    align-items: flex-start;
    font-weight: normal;
  }
}
/* MIXINS */
#brand-assets {
  background: #1c1334;
  background: linear-gradient(180deg, #150f26 0%, #010303 60%);
  padding: 4rem;
}
#brand-assets h1 {
  margin-bottom: 3rem;
}
#brand-assets h3 {
  font-size: 1.5rem;
  font-weight: 600;
  flex-basis: 100%;
  flex-grow: 4;
  margin-bottom: 0;
}
#brand-assets ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 4rem;
}
#brand-assets ul li {
  background-color: #1b1234;
  padding: 1.5rem;
  border-radius: 1rem;
  border: 1px solid #1b1234;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  max-width: 31%;
  justify-content: space-between;
}
#brand-assets ul li img {
  width: 100%;
  max-height: 6rem;
  border-radius: 0.5rem;
}
#brand-assets ul li .downloads {
  display: flex;
  gap: 1rem;
  flex-direction: row;
}
#brand-assets ul li .downloads a {
  font-size: 0.8rem;
  font-weight: 600;
}
#brand-assets ul li .downloads a.btn-ghost.download {
  transition: all 0.3s ease;
}
#brand-assets ul li .downloads a.btn-ghost.download:hover {
  background-color: #C242B1;
  color: #e3e5e8;
  text-shadow: none;
}
#brand-assets ul .subhead {
  font-size: 1.2rem;
  font-weight: 500;
  font-size: 1rem;
}

.thispageisbroke img {
  width: 100%;
  max-width: 600px;
  margin-top: 3rem;
  margin-bottom: 1rem;
}
.thispageisbroke h2 {
  background: -webkit-linear-gradient(45deg, #2B4994, #5B176D, #FF07AA);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 2rem;
  font-weight: 600;
}

@media (max-width: 700px) {
  #brand-assets {
    padding: 2rem;
  }
  #brand-assets ul li {
    max-width: 100%;
  }
}
#contact {
  font-family: "Open Sans", sans-serif;
  width: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  -webkit-animation: fadein 2s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 2s;
  /* Firefox < 16 */
  -ms-animation: fadein 2s;
  /* Internet Explorer */
  -o-animation: fadein 2s;
  /* Opera < 12.1 */
  animation: fadein 2s;
}
#contact.promo {
  background-image: url(../img/appland_landscape_web_2.svg);
  background-size: cover;
  padding: 3rem;
}
#contact.promo .container {
  padding: 0;
}
#contact.promo .page-heading {
  max-width: 650px;
  margin: 0 auto;
  margin-bottom: 2rem;
}
#contact.promo .subhead {
  margin: 0 auto;
  margin-bottom: 2rem;
  max-width: 650px;
}
#contact .page-heading h1 {
  font-family: "Open Sans", sans-serif;
  font-weight: 800;
  font-size: 3rem;
}
#contact .feature-container {
  border-radius: 1rem;
}

.container.contact .feature-container {
  background-color: #1b1234;
  min-height: unset;
  margin: 0;
  margin-bottom: 4rem;
}
.container.contact .feature-container .hbspt-form {
  max-width: 50rem !important;
}
.container.contact .feature-container label {
  display: none;
}
.container.contact .feature-container .input {
  margin-bottom: 1rem;
}
.container.contact .feature-container .input textarea::placeholder {
  color: #808b98;
  font-size: 0.9rem;
}
.container.contact .feature-container fieldset.form-columns-2 {
  margin-bottom: 0;
}
.container.contact .feature-container p {
  margin-top: 0;
}
.container.contact.signup-form {
  max-width: 650px;
}
.container.contact.signup-form .feature-container {
  background-color: rgba(60, 49, 118, 0.7);
}

.contact-cta {
  list-style-type: none;
  padding: 0;
  margin-bottom: 0;
  display: grid;
  grid-template-rows: 1fr 1fr;
  row-gap: 2rem;
}
.contact-cta a {
  border: 1px solid #925EEE;
  border-radius: 0.5rem;
  color: #925EEE;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
.contact-cta a:hover {
  text-decoration: none;
  background: rgba(255, 255, 255, 0.0588235294);
}
.contact-cta input {
  border-color: #925EEE;
}

.hs-form fieldset {
  max-width: none !important;
}

.multi-cta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  margin: 3rem 0;
  padding-bottom: 3rem;
}
.multi-cta .cta-single {
  color: #e3e5e8;
  text-align: center;
  transition: all 0.3s ease;
}
.multi-cta .cta-single img {
  width: 2rem;
  margin: 0 0.5rem 0 0;
  transition: all 0.3s ease;
  border: none;
  display: inline;
}
.multi-cta .cta-single:hover {
  color: #4362b1;
  text-decoration: none;
}
.multi-cta .cta-single:hover img {
  opacity: 0.5;
}

.page-heading {
  margin: 2rem 0;
}

.form-heading {
  text-align: center;
}

.subhead {
  font-family: "Open Sans", sans-serif;
  font-size: 1.25rem;
  margin-top: 0;
}

#contact .hbspt-form .input input {
  font-size: 0.9rem;
  color: #808b98;
  width: 50%;
}
#contact .hbspt-form .input input::placeholder {
  color: #808b98;
}

.submitted-message {
  line-height: 1.5;
}

.demo {
  padding-bottom: 6rem;
}

#contact {
  border-bottom: 1px solid #C242B1;
}
#contact.services .container {
  max-width: 1400px;
}
#contact .container {
  padding: 0 2rem;
}
#contact .contact-list {
  list-style-type: none;
  padding: 0;
  width: fit-content;
  padding: 0.75rem 1.5rem;
  border: 1px solid #925EEE;
  border-radius: 4px;
}
#contact .contact-list li {
  margin: 0.5rem 0;
}

@media (max-width: 1200px) {
  #contact {
    margin-bottom: 2rem;
  }
  .container.contact {
    max-width: 90%;
    margin: 0 auto;
  }
  .container.contact .contact-cta {
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
    height: min-content;
    margin-bottom: 2rem;
  }
  .form-columns {
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr;
    row-gap: 2rem;
  }
}
@media (max-width: 900px) {
  .hbspt-form .hs_submit input {
    width: 50%;
  }
}
@media (max-width: 700px) {
  #contact .container.contact {
    width: 100%;
    max-width: 100%;
    padding: 1.5rem;
  }
}
@media (max-width: 600px) {
  .container.contact .contact-cta {
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr;
    column-gap: 2rem;
    height: min-content;
  }
  .form-columns {
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr;
    row-gap: 2rem;
  }
}
@media (max-width: 480px) {
  #contact .container.contact .page-heading h1 {
    font-size: 4rem;
    line-height: 4.5rem;
  }
}
@media (max-width: 380px) {
  #contact .container.contact .page-heading h1 {
    font-size: 3rem;
    line-height: 3.5rem;
  }
  #contact .container.contact .feature-container {
    padding: 1.5rem;
  }
}
#contact-us h2 {
  font-size: 2.25rem;
  line-height: 3rem;
  color: #E1E2E2;
}
#contact-us section {
  margin: 0;
}
#contact-us .contact-hero {
  margin: 0;
  padding: 0 3rem;
}
#contact-us .contact-hero.compact-hero .section-content {
  max-width: 1400px;
  padding: 3rem 0;
  flex-direction: column;
  align-items: flex-start;
}
#contact-us .contact-hero.compact-hero .section-content .link-block {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
}
#contact-us .contact-hero.compact-hero h1 {
  font-size: 3rem;
  font-family: "Open Sans", sans-serif;
  font-weight: 800;
  text-transform: unset;
  margin-bottom: 0;
}
#contact-us .community-content {
  display: flex;
  flex-direction: row;
  max-width: 1400px;
  margin: auto;
  padding: 3rem;
  gap: 2rem;
  justify-content: space-between;
}
#contact-us .community-content .section-content {
  width: 100%;
  max-width: 1500px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
#contact-us .community-text-block {
  margin: 0 0 2rem 0;
  padding: 0 0 2rem 0;
  border-bottom: 1px solid #1b1234;
}
#contact-us .community-text-block.b-0 {
  border: none;
}
#contact-us .community-text-block .sub-block {
  margin: 2rem 0;
}
#contact-us .community-text-block .sub-block h3 {
  color: #E1E2E2;
  font-size: 1.5rem;
  text-transform: unset;
  font-weight: 700;
}
#contact-us .community-sidebar {
  padding: 3rem 0;
}

.contact-hero {
  background-image: url("../img/purple-contact-us-header.jpg");
  background-size: cover;
  height: 400px;
}
.contact-hero.sales {
  background-image: none;
  height: auto;
}

.community-text-block {
  margin: 0;
}
.community-text-block p {
  max-width: 600px;
}
.community-text-block a.btn.btn-lg-inline {
  margin-bottom: 0;
  border-radius: 3rem;
  padding: 0.5rem 1rem;
}

p.section-description {
  margin-top: 1.5rem;
}

.small-header {
  text-transform: uppercase;
  font-weight: bold;
}

.sidebar {
  max-width: 350px;
}
.sidebar .sidebar-wrap {
  background-color: #1b1234;
  padding: 1rem;
  border-radius: 1rem;
}

.gh-project-image-container {
  width: fit-content;
  max-width: 100%;
  margin: auto;
  margin-bottom: 2rem;
  display: flex;
}

.btn-lg-inline img {
  width: 30px;
  margin: 5px;
}

.section-header-sm {
  margin: 1rem;
}

#feedback-button-icon {
  font-size: 30px;
  color: #806be6;
  padding: 4px;
}

@media (max-width: 1000px) {
  #community .community-content {
    flex-direction: column;
  }
  #community .sidebar {
    width: 100%;
    max-width: 100%;
  }
  #community .newsletter-cta.right-column {
    margin: 1rem 0 0 0;
  }
}
@media (max-width: 992px) {
  .community-content,
  .github-projects {
    flex-direction: column;
    padding: 1rem;
  }
  .community-text-block {
    margin-right: 0px;
  }
}
@media (max-width: 750px) {
  #contact-us .community-content {
    flex-direction: column;
  }
  .sidebar {
    width: 100%;
    max-width: 100%;
  }
  .btn-lg-inline {
    width: 100%;
  }
}
@media (max-width: 650px) {
  #community .community-hero.compact-hero h1 {
    font-size: 4rem;
    line-height: 4.5rem;
  }
  #community h2 {
    font-size: 2.5rem;
    line-height: 3rem;
  }
  #community .community-content {
    padding: 1.5rem;
  }
}
@media (max-width: 530px) {
  #community .community-hero.compact-hero {
    height: unset;
  }
  #community .community-hero.compact-hero h1 {
    font-size: 3.35rem;
    line-height: 4rem;
  }
  #community .community-hero.compact-hero .section-content {
    margin: 0;
  }
  #community .community-hero.compact-hero .section-content .link-block {
    flex-direction: column;
    gap: 1rem;
  }
}
@media (max-width: 450px) {
  #community .community-hero.compact-hero h1 {
    font-size: 2.75rem;
    line-height: 3.25rem;
  }
}
@media (min-width: 1500px) {
  .community-content.one-col {
    width: fit-content;
  }
}

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