:root {
  /* Pulled from the Exterior Carwash logo. */
  --ecw-red: #d63a2f;
  --ecw-blue: #4d4d9f;
  --ecw-blue-dark: #3a3a82;
  --ecw-navy: #20204a;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.btn-brand {
  background-color: var(--ecw-blue);
  border-color: var(--ecw-blue);
  color: #fff;
}

.btn-brand:hover, .btn-brand:focus, .btn-brand:active {
  background-color: var(--ecw-blue-dark);
  border-color: var(--ecw-blue-dark);
  color: #fff;
}

.btn-brand:disabled {
  background-color: var(--ecw-blue);
  border-color: var(--ecw-blue);
  color: #fff;
  opacity: 0.45;
}

.navbar .nav-link.active {
  color: var(--ecw-blue);
  font-weight: 600;
}

.bg-brand-blue {
  background-color: var(--ecw-blue);
}

/* Gradient hero band used at the top of every page. */
.bg-hero {
  background: linear-gradient(135deg, var(--ecw-navy) 0%, var(--ecw-blue) 100%);
}

.hero-lead {
  color: rgba(255, 255, 255, 0.85);
}

/* Pulls a card up so it overlaps the hero band above it. */
.hero-overlap {
  margin-top: -4rem;
}

/* Bootstrap 5.1 has no rounded-4 utility yet. */
.rounded-xl {
  border-radius: 1rem;
}

.card-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.18) !important;
}

/* Numbered circles for the "How it works" steps. */
.step-badge {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ecw-blue);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
}

/* Feature lists with an inline check icon. */
.list-check {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.list-check li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.4rem 0;
}

.list-check svg {
  flex-shrink: 0;
  margin-top: 0.3em;
  color: var(--ecw-blue);
}

.list-check-light svg {
  color: #fff;
}

/* Terms of use, one rule per row. */
.terms-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.terms-list li {
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.terms-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}