:root {
  --yasd-font-display: ui-rounded, "Avenir Next", "Trebuchet MS", sans-serif;
  --yasd-font-body: var(--bs-font-sans-serif);
  --yasd-ink: #18323a;
  --yasd-muted: #53666c;
  --yasd-accent: #16c7dc;
  --yasd-accent-hover: #08aabd;
  --yasd-accent-dark: #007d8c;
  --yasd-warm: #ffc857;
  --yasd-coral: #ff6b5f;
  --yasd-paper: #ffffff;
  --yasd-soft: #f3fbfc;
  --yasd-warm-soft: #fff8df;
  --yasd-line: #d5e7e9;
}

body {
  color: var(--yasd-ink);
  background: var(--yasd-paper);
  font-family: var(--yasd-font-body);
}

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

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

.navbar-brand {
  color: var(--yasd-ink);
  font-family: var(--yasd-font-display);
  font-weight: 400;
}

.yasd-navbar {
  background: var(--yasd-paper);
}

.yasd-navbar .navbar-brand:hover,
.yasd-navbar .navbar-brand:focus {
  color: var(--yasd-ink);
}

.yasd-navbar .nav-link {
  color: var(--yasd-ink);
  font-weight: 600;
}

.yasd-navbar .nav-link:hover,
.yasd-navbar .nav-link:focus,
.yasd-navbar .nav-link.active {
  color: var(--yasd-ink);
}

.yasd-navbar .nav-link.active {
  text-decoration: underline;
  text-decoration-color: #0ed7fc;
  text-decoration-thickness: .2rem;
  text-underline-offset: .35rem;
}

.section-kicker {
  margin-bottom: .75rem;
  color: var(--yasd-accent-dark);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: 0;
}

.product-shot {
  border: 1px solid rgba(23, 33, 43, .18);
  border-radius: .5rem;
  box-shadow: 0 1.5rem 3.5rem rgba(23, 33, 43, .18);
}

.download-cta {
  padding: 5rem 0;
}

.download-cta h2 {
  margin-bottom: 1rem;
  font-family: var(--yasd-font-display);
  font-size: 2rem;
  letter-spacing: 0;
}

.download-cta p {
  margin-bottom: 1.75rem;
  color: var(--yasd-muted);
  font-size: 1.2rem;
}

.download-cta img {
  max-width: 100%;
  width: auto;
  height: 60px;
}

.site-footer {
  padding-top: 2rem;
  color: var(--yasd-muted);
}

@media (min-width: 768px) {
  .download-cta h2 {
    font-size: 2.75rem;
  }
}

@media (max-width: 575.98px) {
  .container,
  .container-fluid {
    --bs-gutter-x: 3rem;
  }

  .product-shot {
    box-shadow: 0 .75rem 1.75rem rgba(23, 33, 43, .16);
  }
}