/* Shared, lightweight public-page theme and article affordances. */
/* Keep the product navigation in flow when its links wrap on small screens. */
html[data-marketing] body > nav.product-nav {
  position:relative;
  height:auto;
  min-height:60px
}

html[data-marketing] body > nav.product-nav + main.container {
  padding-top:32px
}

html[data-marketing] {
  --accent:#087f68;
  --accent-hover:#05614f;
  --fg:#122b38;
  --muted:#5d7481;
  --bg:#f6f9f9;
  --border:#dbe5e8;
  scroll-padding-top:80px
}

html[data-marketing] body {
  font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:#f6f9f9
}

html[data-marketing] h1,html[data-marketing] h2,html[data-marketing] h3,html[data-marketing] .logo {
  font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif
}

html[data-marketing] .hero {
  background:#eef5f4;
  box-shadow:none;
  border-color:#d8e5e3
}

html[data-marketing] .eyebrow,html[data-marketing] .tag {
  background:#e4f2ed;
  color:#086c58
}

html[data-marketing] .hero p,html[data-marketing] .panel p,html[data-marketing] .panel li {
  font-size:16px;
  line-height:1.75
}

html[data-marketing] nav.seo-breadcrumb {
  position:static;
  inset:auto;
  display:flex;
  justify-content:flex-start;
  align-items:baseline;
  gap:8px;
  width:auto;
  height:auto;
  padding:0;
  margin:0 0 20px;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  backdrop-filter:none;
  z-index:auto;
  flex-wrap:wrap;
  font-size:13px;
  line-height:1.6;
  color:#607783;
  font-weight:400
}

html[data-marketing] .seo-breadcrumb a {
  color:#08715e;
  text-decoration:underline;
  text-underline-offset:3px
}

html[data-marketing] .article-body a:not(.btn) {
  color:#08715e;
  text-decoration:underline;
  text-underline-offset:3px
}

html[data-marketing] .hero p.article-byline {
  font-size:13px;
  margin-top:18px;
  color:#576f79
}

html[data-marketing] .seo-table-scroll {
  max-width:100%;
  overflow:auto;
  margin:20px 0
}

html[data-marketing] .article-body pre {
  max-width:100%;
  overflow:auto;
  padding:18px;
  background:#122b38;
  color:#e6f4ef;
  border-radius:8px;
  font-size:13px;
  line-height:1.7;
  white-space:pre
}

html[data-marketing] .article-body li {
  margin-bottom:12px
}

html[data-marketing] :is(a,button,input,select,summary):focus-visible {
  outline:3px solid #087f68;
  outline-offset:4px
}

.demo-play-button {
  position:absolute;
  right:12px;
  bottom:12px;
  z-index:6;
  border:1px solid #ffffff80;
  border-radius:5px;
  background:#122b38dd;
  color:white;
  padding:8px 12px;
  font-size:12px;
  cursor:pointer
}

@media(max-width:640px) {
  html[data-marketing] .mini-table {
    display:block;
    overflow:auto;
    max-width:100%
  }

  html[data-marketing] .seo-breadcrumb {
    font-size:12px
  }

  html[data-marketing] .panel {
    padding:24px 20px
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto!important
  }

  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }

}