:root {
  --accent-color: #c13338;
  --accent-hover: #a02a2e;
  --body-bg: #f0f0f0;
  --body-color: #333;
  --card-bg: #fff;
  --navbar-bg: #212529;
  --footer-bg: #212529;
  --star-color: #f5a623;
  --heading-color: #222;
  --muted-color: #999;
  --section-label-color: #aaa;
  --blog-date-color: #999;
  --blog-hr-color: #ddd;
}

/* Base */
body {
  background: var(--body-bg);
  color: var(--body-color);
}

h1, h2, h3, h4 {
  color: var(--heading-color);
}

a {
  color: var(--accent-color);
}

a:hover {
  color: var(--accent-hover);
}

hr {
  border-color: #ddd;
}

/* Navbar */
.bg-dark {
  background: var(--navbar-bg) !important;
}

.navbar {
  border-bottom: 3px solid var(--accent-color);
}

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.90);
}

.navbar-brand span {
  margin-left: 3px;
  font-family: "Lucida Console", Monaco, monospace;
  font-size: 15px;
  font-weight: 400;
}

/* Main content area */
main {
  padding-top: 56px;
}

main > .container {
  background: var(--card-bg);
  color: var(--body-color);
  border-radius: 8px;
  padding: 30px;
}

main > .container h1,
main > .container h2,
main > .container h3,
main > .container h4 {
  color: var(--heading-color);
}

main > .container a {
  color: var(--accent-color);
}

main > .container a:hover {
  color: var(--accent-hover);
}

main > .container .lead {
  color: #555;
}

main > .container hr {
  border-color: #dee2e6;
}

main > .container .card {
  color: var(--body-color);
}

/* Buttons */
a.btn-accent, button.btn-accent, .btn-accent {
  background: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: #fff !important;
}

a.btn-accent:hover, button.btn-accent:hover, .btn-accent:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  color: #fff !important;
}

a.btn-primary, button.btn-primary, .btn-primary {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: #fff !important;
}

a.btn-primary:hover, button.btn-primary:hover, .btn-primary:hover {
  background-color: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  color: #fff !important;
}

.btn-outline-primary {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.btn-outline-primary:hover {
  color: #fff;
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

.btn-outline-secondary {
  color: #555;
  border-color: #ccc;
}

.btn-outline-secondary:hover {
  color: #fff;
  background-color: #555;
}

/* Legacy download button (homepage) */
.downloadButton .btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--accent-color);
  --bs-btn-border-color: var(--accent-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--accent-hover);
  --bs-btn-hover-border-color: var(--accent-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #8a2024;
  --bs-btn-active-border-color: #8a2024;
}

/* Container max width */
@media (min-width: 1200px) {
  .container {
    max-width: 900px;
  }
}

/* Section label */
.section-label {
  color: var(--section-label-color);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

/* Index page header */
.index-header {
  font-family: futura-pt, sans-serif;
  font-weight: 300;
  margin: auto;
  width: 330px;
  font-size: 25px;
}

@media (min-width: 768px) {
  .index-header {
    font-size: 30px;
    width: 550px;
  }
}

@media only screen and (max-width: 767px) {
  .index-header { max-width: 100%; }
}

.index-header .platformName {
  color: #888;
}

/* Feature cards */
.app-feature-col div.card {
  border: none;
  padding: 20px;
  background: var(--card-bg);
  border-radius: 8px;
}

.app-feature-col h4.card-title {
  font-family: "futura-pt", sans-serif;
  font-weight: bold;
  font-size: 1.17em;
  text-align: left;
  color: var(--heading-color);
}

.app-feature-col p.card-text {
  font-family: "Helvetica Neue", Helvetica, arial, sans-serif;
  font-weight: 300;
  font-size: 16px;
  text-align: left;
  color: #555;
}

/* Blog */
.lead .date {
  color: var(--blog-date-color);
  display: block;
  font-size: 12px;
}

.blogPost img {
  margin-bottom: 15px;
}

.blogPost video {
  margin-bottom: 15px;
}

.blogTitleLink, .blogTitleLink:hover, .blogTitleLink:visited {
  color: var(--heading-color);
  text-decoration: none;
}

blockquote p {
  padding-left: 15px;
  background: #ffffff;
  height: 50px;
  line-height: 50px;
}

/* Compare pages */
.compare-table { margin-top: 20px; }
.compare-table th { background: #f8f9fa; }
.compare-table td, .compare-table th { vertical-align: middle; }
.verdict { background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; padding: 24px; margin: 30px 0; }
.verdict h2 { margin-top: 0; }

/* Footer */
footer {
  background: var(--footer-bg);
  padding-bottom: max(4px, env(safe-area-inset-bottom));
}

footer p {
  color: rgba(255, 255, 255, 0.6);
}

footer a, footer a:visited {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}

footer a:hover {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
}

/* Store page */
.store2-page .store2-hero h1,
.store2-page .store2-hero p {
  color: var(--heading-color);
}

.store2-page .store2-notes {
  color: var(--muted-color);
}

.store2-page .store2-notes a {
  color: #555;
}