:root {
  /* Main color variables */
  --color-dark-blue: #103770;
  --color-middle-blue: #4C86DD;

/* Example usage:
   background-color: var(--color-dark-blue);
   color: var(--color-middle-blue);
*/


nav.navbar.navbar-expand-md.sticky-top.bg-white.border-bottom.shadow-sm {
  padding-bottom: 1.5rem!important;
}

.nav-link {
  color: var(--color-dark-blue) !important;
  font-weight: 600;
}

.nav-link:hover {
  color: var(--color-middle-blue) !important;
}

 /* Custom styles to match dark mode and accents */
    
    .gradient-text {
      background: linear-gradient(90deg, #103770, #4C86DD);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .rounded-2xl { border-radius: 1rem !important; }
    .rounded-3xl { border-radius: 1.5rem !important; }
    .ring { box-shadow: 0 0 0 2px #e5e7eb; }
    .shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,.05); }
    .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); }
    .aspect-ratio-9-19 { aspect-ratio: 9 / 19; }
    .bg-gradient { background: linear-gradient(135deg, #f1f5f9, #e2e8f0)!important; }
    .bg-gradient-dark { background: linear-gradient(135deg, #1e293b, #0f172a); }

    .bg-dark { 
      background-color: var(--color-dark-blue) !important; 
    }
    .bg-middle { 
      background-color: var(--color-middle-blue) !important; 
    }
   


/* Typo */

/* Headings use dark blue */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-dark-blue);
}


h2 {
    font-weight: 400

}

p {
    font-size: .9rem;
    line-height: 1.6;
    margin-bottom: 1rem;

}

ul li {
font-size: .9rem;
line-height: 1.6rem;
}




/* Button */

/* All buttons use dark blue background and middle blue for hover */
button,
.btn {
  background-color: var(--color-dark-blue) !important;
  color: #fff !important;
  border-color: var(--color-dark-blue) !important;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

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






/* Misc */

main {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 1rem;
}

.notes p {
    margin-bottom: 0;
}



/* Table Style */

.mud-simple-table tbody tr td {
            padding: .8rem;
            text-align: center;
}

.mud-simple-table tbody tr td:first-child {
            text-align: left;
            padding-left: 1.5rem;
        }

.mud-simple-table thead tr th {
            vertical-align: top;
            width: 25%;

            &:first-child {
                width: 15%;
            }

            p { 
                margin-bottom: 0;
                text-align: center;
            }

            h2 {

                text-align: center;
                margin-top: 1rem;
            }
        }

tr.subject, th.subject {
  background-color: #524d4d; /* light grey */
  color: white!important;   
  font-weight: bold;
}      




/* Colors */

/* Trial */
.mud-simple-table th:nth-child(2),
.mud-simple-table td:nth-child(2) {
  background-color: #f5f9ff; /* soft blue */
}

/* Publisher Lite */
.mud-simple-table th:nth-child(3),
.mud-simple-table td:nth-child(3) {
  background-color: #fdf5f5; /* light red/pink */
}

/* Publisher Light */
.mud-simple-table th:nth-child(4),
.mud-simple-table td:nth-child(4) {
  background-color: #f9fff5; /* pale green */
}

/* Publisher */
.mud-simple-table th:nth-child(5),
.mud-simple-table td:nth-child(5) {
  background-color: #fffdf5; /* warm beige */
}

/* Enterprise */
.mud-simple-table th:nth-child(6),
.mud-simple-table td:nth-child(6) {
  background-color: #f7f5ff; /* light violet */
}


.ipad-video-wrapper {
  position: relative;

  & > img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
  }

  & > video {
    z-index: 3;
    position: absolute;
    --p: 3%;
    top: var(--p);
    left: var(--p);
    width: calc(100% - var(--p) * 2);
    height: calc(100% - var(--p) * 2);
    /* overflow: hidden;
    border-radius: 1rem; */
  }

}