@font-face {
  font-family: 'Mark OT';
  src: url("/assets/fonts/markot/MarkOT-BoldItalic.woff2") format("woff2"), url("/assets/fonts/markot/MarkOT-BoldItalic.woff") format("woff");
  font-weight: bold;
  font-style: italic; }
@font-face {
  font-family: 'Mark OT';
  src: url("/assets/fonts/markot/MarkOT-HeavyItalic.woff2") format("woff2"), url("/assets/fonts/markot/MarkOT-HeavyItalic.woff") format("woff");
  font-weight: 900;
  font-style: italic; }
@font-face {
  font-family: 'Mark OT';
  src: url("/assets/fonts/markot/MarkOT-Italic.woff2") format("woff2"), url("/assets/fonts/markot/MarkOT-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic; }
@font-face {
  font-family: 'Mark OT Book';
  src: url("/assets/fonts/markot/MarkOT-Book.woff2") format("woff2"), url("/assets/fonts/markot/MarkOT-Book.woff") format("woff");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'Mark OT';
  src: url("/assets/fonts/markot/MarkOT-LightItalic.woff2") format("woff2"), url("/assets/fonts/markot/MarkOT-LightItalic.woff") format("woff");
  font-weight: 300;
  font-style: italic; }
@font-face {
  font-family: 'Mark OT';
  src: url("/assets/fonts/markot/MarkOT-BlackItalic.woff2") format("woff2"), url("/assets/fonts/markot/MarkOT-BlackItalic.woff") format("woff");
  font-weight: 900;
  font-style: italic; }
@font-face {
  font-family: 'Mark OT';
  src: url("/assets/fonts/markot/MarkOT-Bold.woff2") format("woff2"), url("/assets/fonts/markot/MarkOT-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal; }
@font-face {
  font-family: 'Mark OT';
  src: url("/assets/fonts/markot/MarkOT-Black.woff2") format("woff2"), url("/assets/fonts/markot/MarkOT-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal; }
@font-face {
  font-family: 'Mark OT';
  src: url("/assets/fonts/markot/MarkOT-Medium.woff2") format("woff2"), url("/assets/fonts/markot/MarkOT-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal; }
@font-face {
  font-family: 'Mark OT';
  src: url("/assets/fonts/markot/MarkOT-Light.woff2") format("woff2"), url("/assets/fonts/markot/MarkOT-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal; }
@font-face {
  font-family: 'Mark OT';
  src: url("/assets/fonts/markot/MarkOT-Heavy.woff2") format("woff2"), url("/assets/fonts/markot/MarkOT-Heavy.woff") format("woff");
  font-weight: 900;
  font-style: normal; }
body {
  font-family: Mark OT; }
  body ul {
    list-style-type: disc;
    margin-left: 18px; }
  body pre {
    background-color: transparent;
    padding: 0; }
  body code {
    background-color: transparent; }

nav.navbar {
  background-color: #252839;
  padding: 30px; }
  nav.navbar .navbar-start a.navbar-item {
    padding-left: 30px;
    padding-right: 30px; }
  nav.navbar .navbar-end a.navbar-item .icon {
    padding-right: 10px; }
  nav.navbar a.navbar-item {
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: 0.93px;
    padding-left: 15px;
    text-transform: uppercase; }
    nav.navbar a.navbar-item:hover, nav.navbar a.navbar-item:focus-within {
      background-color: inherit; }

section.home-hero {
  background-color: #252839;
  background-image: url("/assets/img/ksql-rocket-small.svg"), url("/assets/img/ksql-rocket.svg");
  background-position: 85% 45%, 0% 10%;
  background-repeat: no-repeat, no-repeat; }
  section.home-hero .hero-body .title {
    color: #ffffff; }
  section.home-hero .hero-body .title.is-1 {
    font-size: 78px;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal; }
  section.home-hero .hero-body .subtitle {
    color: #ffffff;
    font-size: 21px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.24;
    letter-spacing: 0.47px;
    margin-top: 15px;
    width: 80%; }
  section.home-hero .hero-body .buttons {
    display: inline-block;
    margin-top: 80px; }
    section.home-hero .hero-body .buttons .button {
      border: none;
      border-radius: 4px;
      color: #ffffff;
      font-size: 14px;
      font-weight: bold;
      font-style: normal;
      font-stretch: normal;
      line-height: normal;
      letter-spacing: 1.05px;
      text-align: center;
      text-transform: uppercase;
      width: 184px;
      height: 48px; }
    section.home-hero .hero-body .buttons .button.get-started {
      background-color: #ef5762; }
    section.home-hero .hero-body .buttons .button.learn-more, section.home-hero .hero-body .buttons .button.get-code {
      background-color: transparent;
      border: solid 1px #ffffff; }
  section.home-hero .home-hero-news {
    padding: 0;
    opacity: .6;
    transition: opacity .25s ease-out; }
    section.home-hero .home-hero-news:hover {
      opacity: .85; }
    section.home-hero .home-hero-news .inner {
      height: 100%; }
    section.home-hero .home-hero-news .box-label a {
      color: #aaa;
      padding: 0 1rem; }
      section.home-hero .home-hero-news .box-label a:hover {
        color: #aaa; }
    section.home-hero .home-hero-news .updates {
      background-color: #35384a;
      border-radius: 5px;
      padding: 1rem; }
      section.home-hero .home-hero-news .updates ul {
        list-style-type: none;
        margin: 0; }
      section.home-hero .home-hero-news .updates .label {
        color: #aaa;
        margin-bottom: 0; }
      section.home-hero .home-hero-news .updates .more {
        display: flex;
        justify-content: flex-end; }
        section.home-hero .home-hero-news .updates .more a {
          font-size: .8rem;
          color: #aaa; }
          section.home-hero .home-hero-news .updates .more a:hover {
            color: #aaa;
            text-decoration: underline; }
      section.home-hero .home-hero-news .updates a:hover .title {
        text-decoration: underline; }

section.attributes {
  border-bottom: 2px solid #eee; }
  @media screen and (min-width: 769px), print {
    section.attributes {
      background: white;
      margin: -4rem 3rem 0 3rem;
      padding: 2rem 2rem 3rem 2rem; } }
  section.attributes .title {
    font-size: 28px;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #252839; }
  section.attributes p {
    font-size: 16px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.56;
    letter-spacing: normal;
    color: #252839; }

section.customers {
  background: #f8f8f8;
  padding-bottom: 4rem; }
  @media screen and (min-width: 769px), print {
    section.customers {
      position: relative;
      padding: 3rem;
      margin: 0 3rem; } }
  section.customers .image img {
    margin: 0 auto; }
  @media screen and (max-width: 768px) {
    section.customers .columns.is-mobile > .column.is-half-mobile {
      width: 50%; } }

div.underlay {
  background-color: #252839;
  height: 4rem;
  margin-top: -2rem; }

section.in-action {
  padding-bottom: 20rem;
  box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.07); }
  section.in-action .in-action-title {
    margin-top: 1rem;
    margin-bottom: 4rem; }
  section.in-action .in-action-step-title {
    max-width: 350px; }
  section.in-action .snippet-container {
    padding-bottom: 2.75rem; }
    @media screen and (min-width: 769px), print {
      section.in-action .snippet-container {
        min-width: 500px;
        max-width: 500px; } }
    section.in-action .snippet-container .snippet {
      max-width: 100%;
      border-radius: 5px;
      border: 1px solid #eee; }
      section.in-action .snippet-container .snippet code {
        background-color: #f6f8f8; }
  section.in-action .track {
    background-image: linear-gradient(90deg, transparent, 13px, transparent, 13px, #f6f8f8, 17px, #f6f8f8, 17px, transparent);
    padding-left: 0;
    padding-right: 0;
    margin: 0 1.75rem; }
    section.in-action .track .circle {
      border-radius: 50%;
      background: #f6f8f8;
      width: 30px;
      height: 30px;
      display: inline-block;
      box-shadow: 0 0 4px 0 #252839; }
  section.in-action .in-action-step:first-child .track {
    padding-top: 0;
    margin-top: 0.75rem; }
  section.in-action .in-action-step:last-child .track {
    background: none; }
  section.in-action .in-action-step:last-child .snippet-container {
    padding-bottom: 0; }
  section.in-action .in-action-step.is-penultimate {
    margin-bottom: 0; }
    section.in-action .in-action-step.is-penultimate .snippet-container {
      padding-bottom: 3.5rem; }

section.model-intro {
  background: #2c2f3e; }
  @media screen and (min-width: 769px), print {
    section.model-intro {
      padding: 3rem 0 9rem 0; }
      section.model-intro .model-title {
        width: 400px; } }
  section.model-intro .model-title {
    display: inline-block; }
  section.model-intro p, section.model-intro strong {
    color: white; }
  section.model-intro .next-steps {
    margin: -14rem 1rem 5rem 1rem; }
    section.model-intro .next-steps .label {
      color: #ffffff8c;
      margin-left: .7rem;
      margin-bottom: 0; }
    section.model-intro .next-steps .box-label {
      color: #fff;
      background: #2c2e3e;
      padding: 8px 2.75rem;
      margin-left: 0;
      margin-bottom: 2rem;
      text-transform: none;
      font-size: 1rem;
      font-weight: 600;
      border-radius: 5px 5px 0 0; }
    section.model-intro .next-steps > .column {
      box-shadow: 0 3px 6px black;
      border: 4px solid white;
      background: white;
      padding: 0; }
      section.model-intro .next-steps > .column .inner {
        background: #474857;
        border-radius: 5px;
        height: 100%;
        padding-bottom: 1rem; }
        section.model-intro .next-steps > .column .inner ul {
          padding-right: 1rem; }
      section.model-intro .next-steps > .column:first-child {
        margin-bottom: 0; }
        @media screen and (min-width: 769px), print {
          section.model-intro .next-steps > .column:first-child {
            margin-right: 4rem; } }
        section.model-intro .next-steps > .column:first-child .inner {
          background: #994552;
          background-image: url(/assets/img/ksql-rocket.svg);
          background-position: 0% 57%;
          background-repeat: no-repeat; }
        section.model-intro .next-steps > .column:first-child .box-label {
          background: #6c3540; }
        section.model-intro .next-steps > .column:first-child .icon-play {
          color: #2c2e3e;
          font-size: 1.8rem; }

@media screen and (min-width: 769px), print {
  section.model {
    background: white;
    margin: -4rem 3rem 0 3rem;
    padding: 2rem; }
    section.model .concept-header + .concept {
      margin-top: 0; } }
section.model .concept-header {
  padding-bottom: 1rem;
  padding-top: 1.5rem;
  border-top: 8px solid #f6f8f8; }
  section.model .concept-header:first-child {
    padding-top: 0;
    border: none; }
section.model .concept {
  background-color: #f6f8f8;
  padding: 2rem 0;
  margin-top: 2rem; }
  section.model .concept:first-child {
    margin-top: 0; }
  section.model .concept .snippet {
    border-radius: 4px;
    box-shadow: 0 2px 11px 0 rgba(0, 0, 0, 0.08); }
    section.model .concept .snippet code {
      background-color: white; }
  section.model .concept .concept-item figure {
    padding: 5px;
    border-radius: 4px;
    box-shadow: 0 2px 11px 0 rgba(0, 0, 0, 0.08);
    background: white; }
  @media screen and (min-width: 769px), print {
    section.model .concept {
      margin: 4rem; }
      section.model .concept.no-snippet {
        margin-right: 0; }
      section.model .concept .snippet {
        margin-right: -4rem; }
      section.model .concept .concept-item {
        margin-left: -4rem; } }
  @media screen and (max-width: 768px) {
    section.model .concept {
      margin-bottom: 8rem; }
      section.model .concept.no-snippet {
        margin-bottom: 4rem; }
      section.model .concept .snippet {
        margin-bottom: -4rem; }
      section.model .concept .concept-item {
        margin-top: -4rem; } }

section.architecture {
  padding-top: 5rem;
  background-color: #131520; }
  section.architecture p, section.architecture strong {
    color: #ffffff; }
  section.architecture a:hover {
    color: #ffffff; }
  section.architecture figure.traditional-world {
    margin-bottom: 1rem;
    border-bottom: 2px dotted #252839; }
  section.architecture figure.transition {
    width: 3rem;
    margin: 0 auto; }
  section.architecture figure.ksqldb-world {
    border-radius: .5rem;
    padding: 1rem 0; }
  section.architecture .buttons {
    display: inline-block;
    margin-top: 80px; }
    section.architecture .buttons .button {
      border: none;
      border-radius: 4px;
      color: #ffffff;
      font-size: 14px;
      font-weight: bold;
      font-style: normal;
      font-stretch: normal;
      line-height: normal;
      letter-spacing: 1.05px;
      text-align: center;
      text-transform: uppercase;
      width: 184px;
      height: 48px; }
    section.architecture .buttons .button.get-started {
      background-color: #ef5762; }
    section.architecture .buttons .button.learn-more, section.architecture .buttons .button.get-code {
      background-color: transparent;
      border: solid 1px #ffffff; }

section.narrative .description {
  margin-bottom: 2rem; }
section.narrative.use-cases {
  background: #252839; }
section.narrative .narrative-step {
  margin-bottom: 4rem; }
section.narrative p {
  margin-bottom: 15px; }
section.narrative ul {
  list-style-type: none;
  padding-top: 1rem; }
  section.narrative ul li {
    border-left: 5px solid #d8d8d8;
    padding-left: 0.75rem; }
    section.narrative ul li:not(:last-child) {
      padding-bottom: 1.5rem; }
section.narrative iframe {
  height: 315px; }
section.narrative .notification {
  background: #f6f8f8;
  border: 1px solid #ccc; }
section.narrative .ksqldb-world {
  margin: 2rem auto; }

section.concepts .concept {
  background-color: #f6f8f8;
  border-radius: 4px;
  padding: 20px; }

.label {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.8rem;
  color: #747890; }

.next-steps .label {
  margin-left: 2rem; }
.next-steps ul {
  list-style-type: none; }
  .next-steps ul li {
    margin: 0;
    margin-bottom: 1rem;
    padding: 0; }
.next-steps .subtitle {
  color: #ffffff;
  font-size: 18px;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.24;
  letter-spacing: 0.47px;
  margin-left: .7rem; }
.next-steps a {
  display: flex;
  align-items: center; }
  .next-steps a .subtitle {
    border-bottom: 3px solid transparent; }
  .next-steps a:hover .subtitle {
    border-bottom-color: #ddd;
    color: #ddd; }
.next-steps .icon {
  background: #ffffffdd;
  border-radius: 5px;
  width: 3rem;
  height: 3rem;
  padding: 5px; }
  .next-steps .icon.icon-docker {
    color: #2c83ab;
    text-align: right;
    font-size: 1.6rem;
    line-height: 2.3rem; }

.quickstart-hero {
  background-color: #252839; }
  .quickstart-hero .hero-body .title {
    margin-top: 0;
    color: #ffffff; }
  .quickstart-hero .hero-body a:hover {
    color: inherit;
    text-decoration: underline; }
  .quickstart-hero .quickstart-intro {
    padding-right: 3rem; }
  .quickstart-hero .next-steps .tutorials {
    margin-top: 1rem;
    margin-bottom: 5rem; }
  .quickstart-hero .next-steps .quickstart-peek ul {
    margin-left: 0; }

section.quickstart {
  padding-top: 0; }
  section.quickstart .quickstart-step {
    margin-top: 2rem; }
    section.quickstart .quickstart-step .tabs {
      margin-bottom: 0; }
    section.quickstart .quickstart-step .codeblock {
      position: relative;
      border: 1px solid #eee; }
      section.quickstart .quickstart-step .codeblock pre {
        max-height: 300px; }
        section.quickstart .quickstart-step .codeblock pre code {
          padding: 25px; }
    section.quickstart .quickstart-step figure.cloud-logo {
      margin: auto;
      height: 256px;
      width: 256px; }
    section.quickstart .quickstart-step .notification {
      background: #252839; }
      section.quickstart .quickstart-step .notification code {
        background: #eee;
        border-radius: 3px; }
  section.quickstart .tabs li {
    padding-bottom: 0; }
  section.quickstart .tabs a {
    border: none; }
  section.quickstart .tabs .is-active a {
    border-top: 1px solid #dbdbdb;
    background-color: #f8f8f8; }
  section.quickstart li {
    padding-bottom: 16px; }
  section.quickstart .customize .customize-content {
    background: #ddd;
    padding: 1rem;
    border-width: 1px 1px 0 1px;
    border-style: solid;
    border-color: #bbb; }
    section.quickstart .customize .customize-content .customize-controls-item {
      margin-top: .75rem; }
    section.quickstart .customize .customize-content:last-child {
      border-bottom-width: 1px; }
    section.quickstart .customize .customize-content + .codeblock {
      border-top: 0; }
    section.quickstart .customize .customize-content .button {
      white-space: initial;
      height: auto; }
  section.quickstart .customize .codeblock:first-child:not(:last-child) {
    border-bottom-width: 0px; }
  section.quickstart .customize .codeblock + .customize-content {
    border-top: 0; }
  section.quickstart .customize .codeblock .tags {
    padding: .3rem;
    border-top: 1px solid #ddd;
    background: #f8f8f8; }
    section.quickstart .customize .codeblock .tags, section.quickstart .customize .codeblock .tags .tag {
      margin-bottom: 0; }
    section.quickstart .customize .codeblock .tags .is-light-gray {
      background: #ddd; }
    section.quickstart .customize .codeblock .tags .tag {
      white-space: initial;
      height: auto;
      min-height: 2em; }

.quickstart-dist-subtitle {
  padding: 0 1rem;
  margin-top: -1rem; }
  .quickstart-dist-subtitle a i {
    font-size: 0.8rem;
    color: #aaa; }
    .quickstart-dist-subtitle a i:hover {
      color: #aaa; }

section.quickstart-next-steps {
  background-color: #131520;
  margin-top: 1rem; }
  section.quickstart-next-steps .next-steps .title {
    margin-bottom: 1rem; }
  section.quickstart-next-steps .next-steps a {
    display: block; }
  section.quickstart-next-steps .next-steps .subtitle {
    margin: 0; }
  section.quickstart-next-steps .next-steps .icon {
    margin-top: 5px; }
  section.quickstart-next-steps .next-steps .description {
    font-weight: 300;
    color: white;
    padding-right: 1rem; }
    @media (max-width: 1024px) {
      section.quickstart-next-steps .next-steps .description {
        max-width: 20rem;
        margin: 0 auto 1rem auto;
        padding-right: 0; } }
  section.quickstart-next-steps .next-steps .label {
    margin: 0; }
  section.quickstart-next-steps .next-steps .columns .columns .column:first-child {
    padding: 0.75rem 0 0 0; }

@media screen and (max-width: 1023px) {
  nav.navbar .navbar-menu {
    background-color: #131520; }
  nav.navbar .navbar-end a.navbar-item {
    padding-left: 30px; } }

.code {
  font-family: monospace;
  font-size: 14px;
  font-weight: bolder;
  color: #444; }

span.thin {
  font-weight: 100;
  font-size: 1rem; }

svg.tablelike .cell rect {
  fill: #f5f5f5;
  rx: 4; }
svg.tablelike .cell text {
  font-family: Menlo-Regular, Menlo, monospace;
  font-size: 14px;
  font-weight: normal;
  fill: #202020;
  text-anchor: start;
  dominant-baseline: middle; }
svg.tablelike .row.animate {
  opacity: 0; }
svg.tablelike .row:first-child .cell rect {
  fill: #ccc; }
svg.tablelike .row:first-child .cell text {
  font-weight: bold; }
svg.tablelike .offset .progress {
  fill: #3274dc80; }

.quickstart-standalone-controls {
  padding-top: 0;
  padding-bottom: 0; }
  .quickstart-standalone-controls form {
    float: right; }
    .quickstart-standalone-controls form .control-label {
      margin-right: 1rem; }
    .quickstart-standalone-controls form label.active {
      background-color: #f8f8f8;
      border: 1px solid #eee;
      border-radius: 3px;
      padding: 3px 6px; }
  .quickstart-standalone-controls .column {
    padding-top: 0;
    padding-bottom: 0; }

a.copy-btn {
  position: absolute;
  top: 0;
  right: 0;
  margin: 1rem; }
  a.copy-btn svg {
    width: 15px; }
    a.copy-btn svg .copy-icon {
      fill: #ccc; }
    a.copy-btn svg .check polyline {
      stroke: black;
      fill: none;
      stroke-width: 12;
      stroke-dasharray: 100 100;
      stroke-dashoffset: 100;
      transition: stroke-dashoffset 400ms ease-out; }
      a.copy-btn svg .check polyline.active {
        stroke-dashoffset: 0; }

section.developers .image {
  margin: 0 auto; }
  section.developers .image img {
    border-radius: 0.5rem;
    border: 1px solid #eee; }
@media screen and (max-width: 768px) {
  section.developers .column.is-half-mobile {
    width: 50% !important; } }

section.contribute {
  background-color: #252839; }

.content.asciidoc .highlight {
  padding: 0 1.25rem 2rem 1.25rem; }
.content.asciidoc .sect1 {
  margin-top: 2rem; }
.content.asciidoc h2 {
  margin-bottom: 2rem; }

section.distrib-hero .hero-body {
  background-color: #252839;
  background-image: url("/assets/img/ksql-rocket-small.svg"), url("/assets/img/ksql-rocket.svg");
  background-position: 85% 45%, 0% 10%;
  background-repeat: no-repeat, no-repeat;
  padding: 4rem 1.5rem 10rem 1.5rem; }

section.distrib {
  background: #f6f7fa;
  padding: 0 1.5rem;
  padding-bottom: 3rem; }
  section.distrib .distrib-peek, section.distrib .distrib-part {
    background: #fff; }
  section.distrib .distrib-peek {
    padding-bottom: 2rem;
    border-bottom: 4px solid #eee; }
    section.distrib .distrib-peek .distrib-peek-item {
      border-right: 2px solid #eee; }
      section.distrib .distrib-peek .distrib-peek-item:last-child {
        border: none; }
      section.distrib .distrib-peek .distrib-peek-item figure {
        margin: -24px auto 0 auto; }
      section.distrib .distrib-peek .distrib-peek-item .title a {
        color: inherit; }
    @media (min-width: 768px) {
      section.distrib .distrib-peek {
        margin-top: -5rem; } }
  section.distrib .distrib-part {
    margin-top: 3rem;
    padding: 3rem 1.5rem; }
    section.distrib .distrib-part .glyph {
      width: 2.5rem;
      height: .3rem;
      margin: 0 auto 1rem auto; }
    section.distrib .distrib-part .glyph-black {
      background: #252839; }
    section.distrib .distrib-part .glyph-red {
      background: red; }
    section.distrib .distrib-part .glyph-light-blue {
      background: lightblue; }
    section.distrib .distrib-part .glyph-dark-blue {
      background: #0074a3; }
    section.distrib .distrib-part .distrib-symbols {
      margin: 0 auto;
      border-bottom: 2px solid #eee;
      padding: 2rem; }
    section.distrib .distrib-part > .container .columns:first-child {
      margin-bottom: 2rem; }
    section.distrib .distrib-part .columns {
      width: 100%; }
  @media (max-width: 767px) {
    section.distrib .reverse-columns-mobile {
      flex-direction: column-reverse;
      display: flex; } }

section.quickstart-distrib {
  padding-bottom: 0;
  background: #252839; }
  section.quickstart-distrib .distrib-peek {
    border: none;
    padding-bottom: 0;
    background: transparent;
    margin-top: 0; }
    section.quickstart-distrib .distrib-peek .distrib-peek-item {
      margin-right: 2px;
      border: none;
      background: white; }
  section.quickstart-distrib .distrib-peek-item {
    opacity: .7; }
    section.quickstart-distrib .distrib-peek-item:hover {
      opacity: 0.9; }
  section.quickstart-distrib.standalone-active .distrib-peek-item.standalone {
    opacity: 1;
    margin-top: -2px; }
  section.quickstart-distrib.cloud-active .distrib-peek-item.cloud {
    opacity: 1;
    margin-top: -2px; }
  section.quickstart-distrib.platform-active .distrib-peek-item.platform {
    opacity: 1;
    margin-top: -2px; }
  section.quickstart-distrib .mobile-dropdown-container {
    padding-bottom: 0; }
  section.quickstart-distrib.platform-active .mobile-dropdown-container .dropdown-trigger .image, section.quickstart-distrib.cloud-active .mobile-dropdown-container .dropdown-trigger .image {
    padding-right: 1rem; }

section.news-hero .hero-body {
  background-color: #252839;
  background-image: url("/assets/img/ksql-rocket-small.svg"), url("/assets/img/ksql-rocket.svg");
  background-position: 85% 45%, 0% 10%;
  background-repeat: no-repeat, no-repeat;
  padding: 4rem 1.5rem 4rem 1.5rem; }
  section.news-hero .hero-body a:hover {
    color: inherit;
    text-decoration: underline; }
  section.news-hero .hero-body .subtitle {
    color: #747890; }