body {
  padding-top: 50px;
  color: #555;
  background: #f9f9f9;
  font-family: Helvetica, Arial, "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  color: #333;
  font-family: Helvetica, Arial, "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  font-weight: 400;
}

a:focus { text-decoration: none; }
a:hover { text-decoration: none; }

.logo { max-height: 20px; }
.navbar-brand > img { display: inline-block; margin-right: 8px; }
.navbar-inverse .navbar-brand { color: #fff; }
.collapse.in { margin-bottom: 8px; }

.jumbotron {
  margin-bottom: 0;
  color: #fff;
  background: #222;
  font-family: Helvetica, Arial, "Microsoft YaHei", "PingFang SC", sans-serif;
  text-align: center;
}

.jumbotron h1 { font-size: 48px; }
.hero-word {
  color: #fff;
  font-size: 48px;
  line-height: 1.1;
}
.hero-kicker {
  margin-top: 8px;
  color: #bbb !important;
  font-size: 16px !important;
}
.jumbotron h3, .jumbotron h4 { color: #fff; }
.jumbotron h4 { font-size: 18px; }
.jumbotron p { color: #ddd; font-size: 14px; }
.jumbotron p > a, .jumbotron h4 > a { color: #fdd04b; font-weight: 500; }
.jumbotron .dropdown a, .jumbotron .bullet { color: #ddd; }

.content {
  padding-top: 25px;
  padding-bottom: 30px;
  background: #fff;
}

.content img { max-width: 100%; }
.content hr { margin-top: 28px; margin-bottom: 28px; }
.intro-copy { max-width: 880px; margin: 0 auto; }
.feature-row { display: flex; align-items: center; }
.feature-row > [class*="col-"] { float: none; }

.section-title {
  display: flex;
  width: 100%;
  align-items: center;
  font-size: 18px;
  text-align: center;
}
.section-title::before, .section-title::after { flex: 1; border-bottom: 1px solid #fff; content: ""; }
.section-title span { padding: 0 10px; }

.flex-row { display: flex; flex-direction: row; justify-content: space-between; }
.flex-col { display: flex; flex-direction: column; }
.flex-right { display: flex; justify-content: flex-end; gap: 6px; }
.flex-center { display: flex; align-items: center; gap: .4rem; text-align: center; }
.my-12 { margin-top: 12px; margin-bottom: 12px; }
.mt-12 { margin-top: 12px; }
.mt-6 { margin-top: 6px; }
.mb-6 { margin-bottom: 6px; }
.my-auto { margin-top: auto; margin-bottom: auto; }
.w-100, .dropdown-menu { width: 100%; }
.f-sm { font-size: 12px !important; }
.gold { color: #fdd04b !important; }
.filter-black { filter: brightness(0) saturate(100%); }

.badge { padding: 4px; color: #fff; background: #3c76f4; border-radius: 4px; font-weight: 400; }
.purchase {
  display: flex !important;
  width: 100%;
  align-items: center;
  gap: .8rem;
  justify-content: space-between;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 6px !important;
  text-align: left;
}
.purchase img { width: 28px; }
.purchase .badge { padding: 4px; background: #3c76f4; }
.purchase .flex-col { gap: 2px; }
.platform { color: #000; }
.price { margin-left: auto; padding-left: .4rem; color: #000; font-size: 13px !important; text-align: right; }
.price .label { padding: .3em .6em; background: #3c76f4; font-size: 13px; line-height: 18px; }
.version { margin-left: auto; padding-left: .4rem; color: #aaa; font-size: 13px !important; text-align: right; }
.build { padding-left: .2rem; color: #999; }

.dropdown:hover .dropdown-menu, .open .dropdown-menu { display: block; margin-top: 0; }
.dropdown.no-hover:hover .dropdown-menu { display: none; }
.dropdown.open .dropdown-menu { display: block !important; }
li.dropdown-item > a {
  display: flex;
  width: 100%;
  align-items: center;
  gap: .4rem;
  justify-content: flex-start;
  padding: 3px 6px;
  text-align: center;
}
li.dropdown-item > a > img { display: block; max-height: 24px; flex-shrink: 0; padding: 5px; }

.support { padding: 26px 0 12px; background: #fff; }
.blog-footer {
  padding: 20px 0;
  color: #999;
  background: #f9f9f9;
  border-top: 1px solid #e5e5e5;
  text-align: center;
}
.blog-footer p:last-child { margin-bottom: 0; }
code { overflow-wrap: break-word; }
sup { top: -1em; }

@media (max-width: 767px) {
  .jumbotron h1 { font-size: 40px; }
  .hero-word { font-size: 40px; }
  .feature-row { display: block; }
  .feature-row > [class*="col-"] { width: 100%; }
  .feature-copy { margin-top: 18px; margin-bottom: 18px; }
  .purchase .platform { font-size: 13px; }
  .purchase .price { font-size: 12px !important; }
}