header {
  background-color: var(--deep-space-blue);
  border-bottom: 1px solid var(--silver-glow);
}

#hero-maintenance .hero-subtitle {
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 20px 0 0;
  color: var(--slate-grey);
}

.hero-h1-span {
  font-size: 1.25rem;
  font-family: 'Oswald';
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #5B3392;
  background: #E9D5FF;
  border-radius: 8px;
  padding: .375rem 1rem;
  box-shadow: 1px 1px 2px rgba(44, 62, 80, 0.6);
  pointer-events: none;
  cursor: default;
  user-select: none;
  transition: none !important;
}

.pricing-table {
  border: 1px solid var(--slate-light);
  border-collapse: collapse;
}

.pricing-table th,
.pricing-table td {
  border: 1px solid #ddd;
}

.pricing-table thead th {
  background-color: #f5f5f5;
  color: var(--deep-space-blue, #2C3E50);
  font-family: 'Oswald', sans-serif;
  font-size: 1.1rem;
  padding: 1rem;
  text-align: left;
  border-bottom: 2px solid var(--slate-silver, #cfd8e3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pricing-table tbody td {
  padding: 1rem;
  border-bottom: 1px solid var(--slate-silver, #e0e6ed);
  vertical-align: top;
}

.pricing-table tbody tr:nth-child(even) {
  background-color: #fafafa;
}

.pricing-table tbody tr:hover {
  background-color: #f0f4f8;
}

.pricing-table td:first-child {
  font-weight: 600;
}

/* .pricing-table td:nth-child(2) {
  background-color: #fffef8;
  border-left: 4px solid var(--amber, #FFCC33);
} */

.pricing-table small {
  font-weight: normal;
  color: #667;
  font-size: 0.875rem;
}



@media screen and (min-width: 769px) {

  h1 {
    margin-top: 0;
    line-height: .95;
    margin-bottom: 2rem;
  }

  h2 {
    margin-top: 0;
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
  }

  h3 {
    margin-bottom: .5rem;
  }

  hr {
    width: 100%;
  }

  #hero-maintenance .wrapper {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding: 68px 40px 3rem;
    background: linear-gradient(to right, var(--service-card-white) 0%, rgba(255, 255, 255, 0.85) 40%, transparent 60%), url('/img/web-upgrades-hero.webp'), var(--service-card-white);
    background-size: 1025px auto;
    background-repeat: no-repeat;
    background-position: 100% 20%;
    position: relative;
    z-index: 0;
    overflow: visible;
  }

  #hero-maintenance p {
    max-width: 600px;
    margin-top: .75rem;
    margin-bottom: .25rem;
    line-height: 1.8;
  }

  #hero-maintenance p.hero-trust {
    max-width: fit-content;
  }


  p {
        margin-top: .75rem;
    margin-bottom: .25rem;
    line-height: 1.8;
  }

  #hero-maintenance .cta-button,
  #maintenance-cta .cta-button {
    width: fit-content;
    padding-left: 1.8em;
    padding-right: 1.8em;
  }

  .package-hook {
    margin-top: 0;
    margin-bottom: .5rem;
  }

  .package-hero-layout {
    display: flex;
    align-items: flex-start;
    gap: 5rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 4rem 2rem;
    background-color: var(--service-card-white);
  }

  .wrapper {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--service-card-white);
    padding: 3rem 40px 3rem;
  }

  #pricing .highlight-outline {
    margin-top: 3rem;
    margin-bottom: 2rem;
    margin-left: 0;
  }

  .highlight-outline {
    font-size: 1rem;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }


  #hero-maintenance {
    overflow: visible;
  }

  .hero-img-mobile {
    display: none;
  }

}

@media screen and (max-width: 768px),
(max-width: 1200px) and (orientation: landscape) {

  #hero-maintenance h1 {
    margin-top: 0;
    line-height: 1.2;
    font-size: clamp(2.5rem, 2.5rem + 0.5rem, 4rem);
    margin-bottom: 1rem;
  }

  #hero-maintenance .wrapper {
    background-image: none !important;
  }

  .hero-h1-span {
    font-size: 1.125rem;
  }

  .hero-img-mobile {
    width: 100%;
    border: 1px solid var(--muted-charcoal);
    border-radius: 8px;
    margin-bottom: 1rem;
  }

  h2 {
    padding-top: 1rem;
    line-height: 1.3;
  }

  p {
    line-height: 1.8;
    margin: .5rem 0;
  }

  hr {
    width: 100%;
    height: 1px;
    border: none;
    background-color: var(--muted-charcoal);
    margin-top: 1rem;
    margin-bottom: 0;
  }


  .wrapper {
    padding: 0 20px;
  }

  #hero-maintenance .hero-subtitle {
    margin-top: 1rem !important;
    margin-bottom: .25rem !important;
    letter-spacing: .75px;
  }

  #hero-maintenance .cta-button,
  #maintenance-cta .cta-button {
    width: fit-content !important;
    padding-left: 1.2em;
    padding-right: 1.2em;
  }

  #hero-maintenance {
    padding-bottom: 3rem;
  }



  #pricing h2 {
    /* text-align: center; */
    margin-bottom: 2rem;
  }

  .highlight-outline {
    margin-top: 3rem;
    font-size: 1rem;
  }

  #maintenance-cta {
    padding-bottom: 6rem;
  }

  .pricing-table {
    table-layout: fixed;
  }

  .pricing-table tbody td {
    font-size: 1rem
  }


  .pricing-table thead th {
    font-size: 1rem !important;
  }

  .pricing-table th,
  .pricing-table td {
    font-size: 0.875rem;
    padding: 0.75rem;
    word-break: break-word;
  }

  .pricing-table th:first-child,
  .pricing-table td:first-child {
    width: 30%;
  }

  .pricing-table th:nth-child(2),
  .pricing-table td:nth-child(2),
  .pricing-table th:nth-child(3),
  .pricing-table td:nth-child(3) {
    font-size: 0.85rem;
    word-break: break-word;
  }

  .pricing-table th:nth-child(2),
  .pricing-table td:nth-child(2) {
    width: 40%;
  }

  .pricing-table th:nth-child(3),
  .pricing-table td:nth-child(3) {
    width: 30%;
  }

  .pricing-table td {
    padding: 0.75rem;
  }

  #pricing .wrapper {
    padding-bottom: 3rem
  }

  #maintenance-cta .cta-button,
  #hero-maintenance .cta-button {
    margin: 2rem 0 1.5rem;
  }

}