body {
    margin: 0;
    font-family:Arial, Helvetica, sans-serif;
    padding-top: 100pX;
    background-color: #071d3d;;
}

body.page-signup {
    overflow: hidden;
    height: 100vh;
}

.navbar {
    background: #06182f;
    color: white;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50pX;

    padding: 0 40pX;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100pX;
    z-index: 1000;
    box-sizing: border-box;
}

.nav-links {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.logo {
    display: flex;
    align-items: center;
    gap: 15pX;
}

.logo-img {
    width: 55pX;
}

.logo-text h2{
    margin: 0;
    color: #d9a441;
    font-size: 32pX;
}

.logo-text p {
    color: white;
    margin: 0;
    font-size: 13pX;
    text-transform: uppercase;
    letter-spacing: 1pX;
}

.title-decoration-signup {
    font-size: 40pX;
}

.title-decoration-login {
    font-size: 40pX;
}

nav {
    display: flex;
    gap: 35pX;
}

nav a{
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: .3s;
}

nav a:hover:not(.signup-link) {
    color: #d9a441;
    text-decoration: underline;
}

.button{
    display: flex;
    gap: 15pX;
}

.login {
    background: transparent;
    color: white;
    border: 2pX solid #d9a441;
    padding: 10pX 22pX;
    border-radius: 8pX;
    cursor: pointer;
}

.signup {
    background: #d9a441;
    color: #06182f;
    border: none;
    padding: 10pX 22pX;
    border-radius: 8pX;
    font-weight: bold;
    cursor: pointer;
}

.signup:hover {
    transform: translateY(-2pX);
}

.logo-link {
    text-decoration: none;
}

.signup-background-img-goes-here {
    background-image: url('signup-backdrop.PNG');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    width: 100%;
    aspect-ratio: 1534/695;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-background-img-goes-here {
    background-image: url('signup-backdrop.PNG');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    width: 100%;
    aspect-ratio: 1534/695;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.student-signup-background-img-goes-here {
    background-image: url('signup-backdrop.PNG');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    width: 100%;
    aspect-ratio: 1534/900;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.teacher-signup-background-img-goes-here {
    background-image: url('signup-backdrop.PNG');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    width: 100%;
    aspect-ratio: 1534/900;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.administrator-signup-background-img-goes-here {
    background-image: url('signup-backdrop.PNG');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    width: 100%;
    aspect-ratio: 1534/900;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.background-img-goes-here {
    background-image: url('main-backdrop.jpg');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    width: 100%;
    aspect-ratio: 1534/695;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.title {
    color: white;
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.title-signup:not(.login-under-signup) {
    color: white;
    position: absolute;
    top: 1%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login-under-signup {
    font-size: 16pX;
    margin-top: -3pX;
    margin-bottom: -3pX;
}

.login-not-signup-button {
    text-decoration: none;
    color: #f5b82e;
    font-style: italic;
}

.login-not-signup-button:hover:not(.final-signup-login) {
    color: #071d3d;
    text-decoration: underline;
}

#login-not-signup:hover {
    color: white;
    text-decoration: underline;
}

.title-decoration {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 15pX;
    margin-bottom: 10pX;
}

.title-decoration > span:not(.star) {
    width: 180pX;
    height: 2pX;
    background-color: #d9a52b;
    display: block;
}

.text-decoration.star {
    color: white;
    font-size: 30pX;
}

.student-form-box-star {
    color: #f5b82e;
}

.login-form-star {
    color: #f5b82e;
}

.teacher-form-box-star {
    color: #f5b82e;
}

h1 {
    margin: 0;
    white-space: nowrap;
    font-family: Georgia, serif;
    font-size: 90pX;
    letter-spacing: 2pX;
    text-shadow: 3pX 3pX 5pX #000;
}

h1 span {
    color: #e5ad2f;
}

.main-description {
    color: white;
    font-size: 20pX;
    text-align: center;
    max-width: 600pX;
    margin-top: 20pX;
}

.signup-button-2, 
.learn-more-button {
    display: inline-block;
    padding: 18pX 35pX;
    border-radius: 10pX;
    text-decoration: none;
    font-size: 20pX;
    font-weight: bold;
    margin: 10pX;
}

.signup-button-2 {
    background-color: #f5b82e;
    color: #111;
}

.learn-more-button {
    background-color: #071d3d;
    color: white;
    border: 2pX solid #f5b82e;
}

.signup-button-2:hover,
.learn-more-button:hover {
    transform: translateY(-2pX);
}

.features{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20pX;
    padding: 0 7%;
    margin-top: -175pX;
    position: relative;
    z-index: 5;
}

.feature-box{
    background-color: #071d3d;
    border:2pX solid #f5b82e;
    border-radius: 16pX;
    min-height: 145pX;
    padding: 22pX;
    display: flex;
    align-items: center;
    gap: 16pX;
    box-shadow: 0 8pX 20pX rgba(0, 0, 0, 0.2);
}

.feature-box img{
    width: 38pX;
    height: 38pX;
}

.feature-box p{
    color: white;
    font-size: 18pX;
    text-align: center;
}

.feature-icon {
    flex: 0 0 70pX;
    min-width: 70pX;
    width: 70pX;
    height: 70pX;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.play-icon {
    background-color: #5b8c4a;
}

.learn-icon {
    background-color: #315b9b;
}

.earn-icon {
    background-color: #5b3b91;
}

.lead-icon {
    background-color: #c46618
}

.feature-text{
    margin: 0 0 8pX 0;
    font-size: 24pX;
    text-align: left;
}

.feature-text h2{
    margin: 0 0 6pX 0;
    font-size: 27pX;
    font-weight: 800;
    letter-spacing: 1pX;
    text-align: right;
    margin-right: 55pX;
}

.feature-text p{
    margin: 0;
    color: white;
    font-size: 14pX;
    line-height: 1.4;
}

.play-feature h2 {
    color: #5b8c4a;
}

.learn-feature h2 {
    color: #315b9b;
}

.earn-feature h2 {
    color: #5b3b91;
}

.lead-feature h2 {
    color: #c46618;
}

.bottom-section {
    position: relative;
    width: 100%;
}

.background-image-2-goes-here {
    display: block;
    width: 100%;
    height: auto;
    margin-top: -15pX;
}

.star-layer {
    position: absolute;
    inset: 0;
}

.path-star {
    position: absolute;
    width: 45pX;
    height: 45pX;
    filter: 
        drop-shadow(0 0 4pX #fff)
        drop-shadow(0 0 10pX rgba(255, 255, 255, 8))
        drop-shadow(0 0 22pX rgba(255, 255, 255, .4));
}

.path-star svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.glowing-star {
    fill: white;
    stroke: white;
    stroke-width: 2;
}

.star-1 {
    left: 15%;
    top: 2%;
    width: 65pX;
    height: 65pX;
}

.star-2 {
    left: 25%;
    top: 8%;
    width: 80pX;
    height: 80pX;
}

.star-3 {
    left: 37%;
    top: 15%;
    width: 100pX;
    height: 100pX;
}

.star-4 {
    left: 56%;
    top: 20%;
    width: 130pX;
    height: 130pX;
}

.star-5 {
    left: 56%;
    top: 33%;
    width: 130pX;
    height: 130pX;
}

.star-6 {
    left: 45%;
    top: 38%;
    width: 130pX;
    height: 130pX;
}

.star-7 {
    left: 32%;
    top: 44%;
    width: 130pX;
    height: 130pX;
}

.star-8 {
    left: 32%;
    top: 62%;
    width: 130pX;
    height: 130pX;
}

.star-9 {
    left: 48%;
    top: 66%;
    width: 100pX;
    height: 100pX;
}

.star-10 {
    left: 63%;
    top: 69%;
    width: 80pX;
    height: 80pX;
}

.star-11 {
    left: 61%;
    top: 85%;
    width: 100pX;
    height: 100pX;
}

.star-12 {
    left: 47%;
    top: 87%;
    width: 130pX;
    height: 130pX;
}

.washington-section {
    position: absolute;
    left: 64%;
    top: 20%;
    z-index: 15;
}

.washington-section-image {
    width: 520pX;
    height: auto;
    display: block;
}

.battle-section {
    position: absolute;
    left: 1%;
    top: 48%;
    z-index: 15;
}

.battle-section-image {
    width: auto;
    height: 500pX;
    display: block;
}

.founding-documents-section {
    position: absolute;
    left: 61%;
    top: 70%;
    z-index: 15;
}

.founding-documents-section-image {
    width: 600pX;
    height: auto;
    display: block;
}

.text-section {
    position: absolute;
    z-index: 20;
    width: 50%;
    text-align: center;
}

.text-1 {
    left: 47%;
    top: 2%;
}

.text-section h2 {
    color: white;
    font-family: Georgia, serif;
    font-size: 70pX;
    margin-bottom: 12pX;
    text-align: center;
}

.text-section p {
    color: rgba(255, 255, 255, 0.9);
    font-family: Georgia, serif;
    font-size: 20pX;
    line-height: 1.6;
    text-align: center;
}

.text-2 {
    left: 2%;
    top: 20%;
}

.text-3 {
    left: 50%;
    top: 46%;
}

.text-4 {
    left: 2%;
    top: 70%;
}

.signup-section {
    position: absolute;
    z-index: 20;
    left: 50%;
    bottom: 1%;
    transform: translateX(-50%);
    width: 80%;
    text-align: center;
}

.signup-section h2{
    color: white;
    font-family: Georgia, serif;
    font-size: 38pX;
    margin-bottom: 12pX;
}

.signup-section p{
    color: rgba(255, 255, 255, 0.9);
    font-family: Georgia, serif;
    font-size:  18pX;
    line-height: 1.6;
    margin: 0 auto 25pX;
    max-width: 650pX;
}

.final-signup-button {
    display: inline-block;
    padding: 16pX 25pX;
    background: #d4af37;
    color: #071d3d;
    font-family: Georgia, serif;
    font-size: 20pX;
    font-weight: bold;
    text-decoration: none;
    border-radius: 6pX;
    border: 2pX solid #f0d878;
    box-shadow: 0 0 15pX rgba(212, 175, 55, 0.5);
    transition: all 0.3s ease;
}

.final-signup-button:hover {
    transform: translateY(-3pX);
    box-shadow: 0 0 25pX rgba(212, 175, 55, 0.8);
}

.site-footer {
    position: relative;
    background: #050f20;
    color: white;
    border-top: 2pX solid #d4af37;
    padding: 55pX 8% 25pX;
    font-family: Georgia, serif;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    max-width: 1100pX;
    margin: 0 auto 45pX;
}

.footer-brand h2{
    color: #d4af37;
    font-size: 30pX;
    letter-spacing: 2pX;
    margin: 0 0 10pX;
}

.footer-brand p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 16pX;
    margin: 0;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 9pX;
}

.footer-column h3{
    color: #d4af37;
    font-size: 18pX;
    margin: 0 0 8pX;
}

.footer-column a{
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 15pX;
    transition: color 0.2s ease;
}

.footer-column:hover {
    color: white;
}

.footer-bottom{
    border-top: 1pX solid rgba(255, 255, 255, 0.2);
    padding-top: 20pX;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1100pX;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13pX;
}

.footer-bottom p{
    margin: 0;
}

.footer-bottom div{
    display: flex;
    gap: 10pX;
}

.footer-bottom a{
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
}

.footer-bottom a:hover {
    color: white;
}

.sign-up-title {
    font-family: Geeorgia, serif;
    margin-top: -30pX;
}

.sign-up-paragraph {
    font-style: italic;
    font-size: 30pX;
    margin-top: 10pX;
}

.signup-link {
    text-decoration: none;
}

.signup-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22pX;
    padding: 0 7%;
    margin-top: -475pX;
    position: relative;
    z-index: 5;
}

.signup-card {
    background-color: #071d3d;
    border: 2pX solid #f5b82e;
    border-radius: 16pX;
    min-height: 250pX;
    padding: 30pX 28pX 24pX;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 8pX 20pX rgba(0, 0, 0, 0.3);
    position: relative;
}

.signup-card-icon img{
    width: 88pX;
    height: 88pX;
    object-fit: contain;
}

.signup-card-icon {
    width: 100pX;
    height: 100pX;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8pX;
}

.signup-card-text {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
}

.signup-card-text h2 {
    margin: 5pX 0 10pX;
    color: white;
    font-size: 30pX;
    font-weight: 800;
    letter-spacing: 1pX;
    text-transform: uppercase;
    font-family: Georgia, 'Times New Roman', serif
}

.text-decoration-signup {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12pX;
    margin: 2pX 0 18pX;
}

.text-decoration-signup span:not(.star) {
    height: 2pX;
    flex: 1;
    max-width: 100pX;
    background-color: #f5b82e;
}

.text-decoration-signup .star {
    color: #f5b82e;
    font-size: 20pX;
}

.signup-card p{
    margin: 0 auto;
    color: white;
    font-size: 17pX;
    line-height: 1.45;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    max-width: 270pX;
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.select-button {
    width: 100%;
    max-width: 285pX;
    min-height: 55pX;
    margin-top: 20pX;
    background-color: #f5b82e;
    color: #071d3d;
    border: none;
    border-radius: 5pX;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10pX;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 22px;
    font-weight: 800;
    text-transform: uppercase;
    transition: 0.2s ease;
}

.select-button img {
    width: 20pX;
    height: 20pX;
    object-fit: contain;
}

.select-button:hover {
    background-color: #ffd15c;
    transform: translateY(-2pX);
    box-shadow: 0 5pX 12pX rgba(0, 0, 0, 0.25);
}

@media (max-width: 1000pX) {
    .signup-content {
        grid-template-columns: 1fr;
        max-width: 500pX;
        margin-left: auto;
        margin-right: auto;
    }

    .signup-card {
        min-height: 380pX;
    }
}

.signup-form-box {
    width: 700pX;
    max-width: 90%;
    margin: 35pX auto -50pX;
    padding: 20pX 50pX 30pX;
    background-color: #071d3d;
    border: 2pX solid #d9a72c;
    border-radius: 12pX;
    box-shadow: 0 8pX 25pX rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
}

.signup-field {
    margin-bottom: 27pX;
}

.signup-field label {
    display: block;
    margin-bottom: 8pX;
    color: #f4d48a;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 16pX;
    font-weight: bold;
    letter-spacing: 0.5pX;
}

.signup-field input {
    width: 100%;
    height: 40pX;
    padding: 0 15pX;
    box-sizing: border-box;
    background-color: #071d3d;
    border: 1.5pX solid #c9962e;
    border-radius: 8pX;
    color: white;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 16pX;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.signup-field input::placeholder {
    border-color: #a7aeb9;
}

.signup-field input:focus {
    border-color: #f2bd3d;
    box-shadow: 0 0 6pX rgba(242, 189, 61, 0.35);
}

.signup-create-button {
    width: 100%;
    height: 62pX;
    margin-top: 5pX;
    border: none;
    border-radius: 8pX;
    background-color: #eeb52f;
    color: #071d3d;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 22pX;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
}

.signup-create-button:hover {
    background-color: #f5c84c;
    transform: translateY(-2pX);
}


.signup-login-text {
    margin: 0;
    text-align: center;
    color: white;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 16pX;
    font-style: italic;
}

.signup-login-text a {
    color: #eeb52f;
    text-decoration: underline;
    cursor: pointer;
}

.signup-login-text a:hover {
    color: #f5c84c;
}

.student-title-signup {
    margin-top: -20pX;
}

.student-sign-up-paragraph {
    margin-top: -10pX;
}

.login-under-signup-student {
    color: white;
    display: block;
    text-align: center;
}

.teacher-title-signup {
    margin-top: -20pX;
}

.teacher-sign-up-paragraph {
    margin-top: -10pX;
}

.administrator-title-signup {
    margin-top: 0;
}

.administrator-sign-up-paragraph {
    margin-top: 0;
}

.login-title {
    margin-top: -20pX;
}

.login-form {
    width: 700pX;
    max-width: 90%;
    margin: 35pX auto -50pX;
    padding: 20pX 50pX 30pX;
    background-color: #071d3d;
    border: 2pX solid #d9a72c;
    border-radius: 12pX;
    box-shadow: 0 8pX 25pX rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
}

.login-field {
    margin-bottom: 27pX;
}

.login-field label {
    display: block;
    margin-bottom: 8pX;
    color: #f4d48a;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 16pX;
    font-weight: bold;
    letter-spacing: 0.5pX;
}

.login-field input {
    width: 100%;
    height: 40pX;
    padding: 0 15pX;
    box-sizing: border-box;
    background-color: #071d3d;
    border: 1.5pX solid #c9962e;
    border-radius: 8pX;
    color: white;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 16pX;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.login-field input::placeholder {
    border-color: #a7aeb9;
}

.login-field input:focus {
    border-color: #f2bd3d;
    box-shadow: 0 0 6pX rgba(242, 189, 61, 0.35);
}

.login-button {
    width: 100%;
    height: 62pX;
    margin-top: 5pX;
    border: none;
    border-radius: 8pX;
    background-color: #eeb52f;
    color: #071d3d;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 22pX;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
}

.login-button:hover {
    background-color: #f5c84c;
    transform: translateY(-2pX);
}

.remember-me-checkbox input[type="checkbox"] {
    margin-right: 8pX;
    border: 1.5pX solid #eeb52f;
}

.remember-me-checkbox label {
    color: white;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 16pX;
}

.forgot-password {
    color: white;
    text-decoration: underline;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 16pX;
}

.forgot-password:hover {
    color: #eeb52f;
}

.login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.login-sign-up-paragraph {
    color: white;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 16pX;
    display: block;
    text-align: center;
}

.login-sign-up-link {
    color: #eeb52f;
    text-decoration: underline;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 16pX;
}

.login-sign-up-link:hover {
    color: white;
}

.student-profile {
    min-height: 100vh;
    background: #071d3d;
    padding: 50pX 7% 70pX;
    box-sizing: border-box;
    color: white;
}

.student-profile .profile-header {
    text-align: center;
    margin-bottom: 35pX;
}

.student-profile .profile-header h1{
    font-size: 42pX;
    margin: 0 0 10pX;
    color: white;
}

.student-profile .profile-header p{
    font-size: 18pX;
    margin: 0;
    color: white;
}

.student-profile .username-section {
    width: 100%;
    max-width: 500pX;
    margin: 0 auto 40pX;
}

.student-profile .username-section label {
    display: block;
    font-size: 18pX;
    font-weight: 600;
    margin-bottom: 10pX;
}

.student-profile #username {
    width: 100%;
    box-sizing: border-box;
    padding: 15pX 18pX;
    border: 2pX solid #d5dbe3;
    border-radius: 10pX;
    background: white;
    font-size: 17pX;
    outline: none;
    transition: border-color 0.2s ease;
}

.student-profile #username:focus {
    border-color: #f5b82e;
}

.student-profile .selected-avatar {
    width: 180pX;
    height: 180pX;
    margin: 0 auto 25pX;
    border-radius: 50%;
    overflow: hidden;
    border: none;
    box-sizing: border-box;
}

.student-profile .selected-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.student-profile .avatar-section {
    text-align: center;
}

.student-profile .avatar-section h2 {
    font-size: 30pX;
    margin: 0 0 8pX;
    color: white;
}

.student-profile .avatar-instructions {
    font-size: 20pX;
    color: #666;
    margin: 0 0 30pX;
}

.student-profile .avatar-grid {
    width: 100%;
    max-width: 1000pX;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30pX 25pX;
    visibility: visible;
}

.student-profile .avatar-image-button {
    width: 150pX;
    height: 150pX;
    padding: 0;
    border: none;
    outline: 4pX solid transparent;
    outline-offset: 0;
    border-radius: 50%;
    overflow: hidden;
    background: none;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.student-profile .avatar-image-button img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 50%;
}

.student-profile .avatar-image-button:hover {
    transform: translateY(-5pX);
    border-color: white;
    box-shadow: 0 8pX 20pX rgba(0, 0, 0, 0.15);
}

.student-profile .avatar-image-button.selected {
    border-color: #f5b82e;
    box-shadow: 0 0 0 4pX #071d3d;
}

.student-profile .avatar-name {
    margin-top: 10pX;
    padding: 0;
    border: none;
    background: none;
    color: white;
    font-size: 16pX;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease;
}

.student-profile .avatar-name:hover {
    color: #c58a00;
    text-decoration: underline;
}

.student-profile #continueButton {
    display: block;
    margin: 45pX auto 0;
    padding: 16pX 40pX;
    border: none;
    border-radius: 10pX;
    background: #f5b82e;
    color: #071d3d;
    font-size: 18pX;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.student-profile #continueButton:hover {
    transform: translateY(-2pX);
    box-shadow: 0 0 25pX rgba(212, 175, 55, 0.8);
}

@media (max-width: 1000pX) {
    .student-profile .avatar-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 700pX) {
    .student-profile {
        padding: 35pX 5% 50pX;
    }

    .student-profile .profile-header h1 {
        font-size: 34pX;
    }

    .student-profile .avatar-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25pX 15pX;
    }

    .student-profile .avatar-image-button {
        width: 125pX;
        height: 125pX;
    }
}

.student-profile .bio-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(7, 29, 61, 0.75);
    z-index: 1000;
    padding: 20pX;
    box-sizing: border-box;
}


.student-profile .bio-overlay.active {
    display: flex;
}

.student-profile .bio-popup {
    position: relative;
    width: 100%;
    max-width: 600pX;
    max-height: 85vh;
    overflow-y: auto;
    background: #071d3d;
    border-radius: 16pX;
    border: 4pX solid #f5b82e;
    padding: 35pX;
    box-sizing: border-box;
    text-align: center;
    box-shadow: 0 15pX 50pX rgba(0, 0, 0, 0.3);
}

.student-profile .bio-popup img {
    width: 150pX;
    height: 150pX;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    margin: 0 auto 20pX;
}

.student-profile .bio-popup p {
    margin: 0;
    color: white;
    font-size: 17pX;
    line-height: 1.7;
}

.student-profile .bio-close {
    position: absolute;
    top: 18pX;
    right: 15pX;
    border: none;
    background: none;
    color: white;
    font-size: 32pX;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease, transform 0.2s ease;
}

.student-profile .bio-close:hover {
    color: #c58a00;
    transform: scale(1.1);
}

.student-navbar-info {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 22pX;
    min-width: 0;
}

.xp-display {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    gap: 7px;
    color: #f5b82e;
    font-size: 17px;
    font-weight: 700;
    white-space: nowrap;
}

.xp-star {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: #f5b82e;
    font-size: 25px;
}

.profile-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: 30px;
    background: transparent;
    color: white;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}

.profile-menu:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(245, 184, 46, 0.35);
}

.profile-menu img {
    width: 45px;
    height: 45px;
    border: 2px solid #f5b82e;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.profile-menu #navbarUsername {
    display: flex;
    align-items: center;
    line-height: 1;
    color: white;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.profile-arrow {
    width: 8pX;
    height: 8pX;
    border-right: 2pX solid #f5b82e;
    border-bottom: 2pX solid #f5b82e;
    transform: rotate(45deg) translateY(-2pX);
    flex-shrink: 0;
    margin-left: 3pX;
    margin-top: -4pX;
    transition: transform 0.2s ease;
}

.dashboard-layout {
  display: grid;
  grid-template-columns: 220pX minmax(0, 1fr) 240pX;
  gap: 20pX;
  padding: 20px;
  align-items: start;
  width: 100%;
  min-height: calc(100vh - 100px);
  box-sizing: border-box;
}

.dashboard-sidebar,
.dashboard-content,
.dashboard-right {
    min-width: 0;
}

.sidebar-nav-box {
    background-color: #071d3d;
    border: 2px solid #f5b82e;
    border-radius: 16px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 13px 14px;
    border-radius: 8px;
    color: white;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: background-color 0.2s ease,
                color 0.2s ease;
}

.sidebar-icon {
    width: 22px;
    text-align: center;
    font-size: 19px;
    flex-shrink: 0;
}

.sidebar-link:hover,
.sidebar-link.active {
    background-color: #f5b82e;
    color: #071d3d;
}

.sidebar-link:focus-visible {
    outline: 2px solid white;
    outline-offset: 3px;
}

.sidebar-quote-box {
    background-color: #071d3d;
    border: 2px solid #f5b82e;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.quote-divider {
    display: block;
    background-color: #f5b82e;
    width: 100%;
    max-width: 180pX;
    height: 2pX;
    border: 0;
}

.quote-star {
    color: #f5b82e
}

.sidebar-quote {
    color: white;
    font-size: 15px;
    line-height: 1.7;
    font-style: italic;
    text-align: center;
    margin: 0;
}

.sidebar-quote-author {
    color: #f5b82e;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    margin: -6px 0 0;
}

.sidebar-book-image {
    display: block;
    width: 100%;
    max-height: 200pX;
    border-radius: 10pX;
    object-fit: contain;
}

.dashboard-content {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 20px;
    box-sizing: border-box;
    background-color: beige;
    border-radius: 16px;
}

.dashboard-main {
    display: flex;
    flex-direction: column;
    gap: 20pX;
    min-width: 0;
    width: 100%;
}

.welcome-banner {
    margin: 0;
    width: 100%;
    height: auto;
    min-height: 250pX;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30pX;
    background-image: url("parchment-capitol.png");
    background-size: cover;
    background-position: center;
    box-sizing: border-box;
    background-repeat: no-repeat;
    border-radius: 12pX;
}

.welcome-writing {
    width: 100%;
    max-width: 550pX;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.eyebrow {
    margin: 0 0 5pX;
    font-family: Georgia, 'Times New Roman', serif;
    letter-spacing: 2pX;
}

.welcome-banner h1 {
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
    letter-spacing: 2pX;
    max-width: none;
}

.welcome-banner blockquote {
    margin: 15pX 0 8pX;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    line-height: 1.5;
}

.second-quote-author {
    margin: 0;
    text-align: center;
    font-size: 14pX;
    font-family: Georgia, 'Times New Roman', serif;
    letter-spacing: 1pX;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

.stat-card {
  background: rgba(255, 252, 245, 1);
  border: 3px solid #f5b82e;
  border-radius: 9px;
  padding: 16pX 8pX;
  text-align: center;
  min-width: 0;
  box-sizing: border-box;
}

.stat-icon {
  display: block;
  width: 45pX;
  height: 45pX;
  object-fit: contain;
  margin: 0 auto 12pX;
}

.stat-card h3 {
  font-size: 15pX;
  line-height: 1.3;
  overflow-wrap: break-word;
}

.stat-card p {
  margin: 0 0 12px;
  font: 18px Georgia, serif;
}

.xp-emphasis {
    font-weight: bold;
    font-size: 24pX;
}

.progress-track {
    width: 100%;
    height: 12pX;
    overflow: hidden;
    background: #ddd3c0;
    border-radius: 20pX;
}

.continue-lesson-button {
  display: inline-block;
  padding: 11px 16px;
  border-radius: 7px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  font-family: Georgia, 'Times New Roman', serif;
  color: white;
  background-color: #071d3d;
  text-decoration: none;
}

.continue-lesson-button:hover {
    transform: translateY(-2pX);
}

.assignments-panel {
    background-color: #071d3d;
    border: 2px solid #f5b82e;
    border-radius: 16px;
    padding: 18px;
    color: white;
    box-sizing: border-box;
}

.assignments-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 18px;
}

.assignments-heading h2 {
    margin: 0;
    font: bold 21px Georgia, "Times New Roman", serif;
}

.assignments-heading p {
    margin: 6px 0 0;
    color: #d5dbea;
    font-size: 12px;
}

.assignments-count {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 50%;
    background-color: #f5b82e;
    color: #071d3d;
    font-weight: bold;
}

.assignments-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.assignment-card {
    background-color: #fffdf7;
    color: #071d3d;
    border-radius: 10px;
    padding: 13px;
}

.assignment-card h3 {
    margin: 0 0 7px;
    font: bold 16px Georgia, "Times New Roman", serif;
}

.assignment-card p {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.5;
}

.assignment-due-date {
    color: #805b0b;
    font-size: 12px;
    font-weight: bold;
}

.assignment-status {
    display: inline-block;
    margin-top: 9px;
    padding: 5px 8px;
    border-radius: 5px;
    background-color: #f5b82e;
    color: #071d3d;
    font-size: 11px;
    font-weight: bold;
}

.assignments-empty {
    margin: 0;
    padding: 16px 10px;
    border: 1px dashed #71809a;
    border-radius: 10px;
    color: #d5dbea;
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
}

.view-all-assignments {
    display: block;
    margin-top: 18px;
    color: #f5b82e;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}

.view-all-assignments:hover {
    text-decoration: underline;
}

.suggested-lessons {
    background-color: #071d3d;
    border: 2px solid #f5b82e;
    border-radius: 16px;
    padding: 18px;
    color: white;
    box-sizing: border-box;
}

.suggested-lessons-heading {
    gap: 10px;
    margin-bottom: 18px;
}

.suggested-lessons-heading h2 {
    margin: 0;
    font: bold 21px Georgia, "Times New Roman", serif;
}

.suggested-lessons-heading p {
    margin: 6px 0 0;
    color: #d5dbea;
    font-size: 12px;
}

.suggested-lesson-modules {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.suggested-lessons-heading {
    margin: 0;
    padding: 16px 10px;
    border: 1px dashed #71809a;
    border-radius: 10px;
    color: #d5dbea;
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
}

.explore-all-lessons {
    display: block;
    margin-top: 18px;
    color: #f5b82e;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}

.explore-all-lessons:hover {
    text-decoration: underline;
}

.stat-link {
    text-decoration: none;
    text-decoration: underline;
    color: #f5b82e;
}

.stat-link:hover {
    color: #071d3d;
}

.teacher-profile-box {
    background-color: #071d3d;
    border: 2px solid #f5b82e;
    border-radius: 16px;
    padding: 18px;
    color: white;
    box-sizing: border-box;
}

.teacher-avatar-in-profile-box {
    display: inline-block;
    left: 1%;
    width: 70pX;
    height: 70pX;
    margin-top: -5pX;
}

.teacher-in-box-title {
    display: inline-block;
}

.teacher-name {
    font-family: Georgia, 'Times New Roman', serif;
    color: white;
    margin-bottom: -5pX;
    font-weight: bold;
    font-size: 18pX;
}

.teacher-role {
    font-family: Georgia, 'Times New Roman', serif;
    color: white;
    margin-bottom: -5pX;
    font-size: 14pX;
}

.teacher-time {
    font-family: Georgia, 'Times New Roman', serif;
    color: white;
    margin-bottom: -5pX;
    font-size: 14pX;
}

.teacher-profile-box-quote {
    font-size: 22pX;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    text-align: center;
    color: #f5b82e;
}

.teacher-quick-links-box {
    background-color: #071d3d;
    border: 2px solid #f5b82e;
    border-radius: 16px;
    padding: 18px;
    color: white;
    box-sizing: border-box;
}

.teacher-dashboard-image {
    width: 100%;
    height: auto;
}

.teacher-classes-panel {
    margin: 24px 0;
    padding: 24px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(7, 29, 61, 0.06);
}

.teacher-classes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.teacher-classes-header h2 {
    margin: 0 0 6px;
    color: #071d3d;
}

.teacher-classes-header p {
    margin: 0;
    color: #667085;
}

.teacher-classes-panel button {
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    background: #071d3d;
    color: #ffffff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.teacher-classes-panel button:hover {
    background: #123663;
}

.teacher-classes-panel button:disabled {
    opacity: 0.6;
    cursor: wait;
}

#createClassForm {
    margin-bottom: 22px;
    padding: 18px;
    background: #f8fafc;
    border-radius: 10px;
}

#createClassForm[hidden] {
    display: none;
}

#createClassForm label {
    display: block;
    margin-bottom: 8px;
    color: #071d3d;
    font-weight: 600;
}

#createClassForm input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    margin-bottom: 14px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font: inherit;
}

.create-class-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

#createClassForm #cancelCreateClassButton {
    background: #e5e7eb;
    color: #071d3d;
}

#teacherClassesList {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.teacher-class-card {
    padding: 18px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
    overflow-wrap: anywhere;
}

.teacher-class-card h3 {
    margin-top: 0;
    color: #071d3d;
}

.teacher-class-card p {
    color: #475467;
}

.teacher-class-card button {
    background: #f5b82e;
    color: #071d3d;
}

.teacher-class-card button:hover {
    background: #e4a91b;
}

@media (max-width: 600px) {
    .teacher-classes-panel {
        padding: 16px;
    }

    .teacher-classes-header {
        align-items: flex-start;
    }
}

.join-class-panel,
.student-classes-panel {
    padding: 20px;
    margin-bottom: 20px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(7, 29, 61, 0.06);
}

.join-class-panel h2,
.student-classes-panel h2 {
    margin-top: 0;
    color: #071d3d;
}

.join-class-panel > p {
    color: #667085;
    line-height: 1.5;
}

#joinClassForm label {
    display: block;
    margin: 14px 0 8px;
    color: #071d3d;
    font-weight: 600;
}

#classCodeInput {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font: inherit;
    text-transform: uppercase;
    letter-spacing: 2px;
}

#classCodeInput placeholder {
    font-size: 14pX;
}

#joinClassButton {
    width: 100%;
    margin-top: 12px;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: #071d3d;
    color: #ffffff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

#joinClassButton:hover {
    background: #123663;
}

#joinClassButton:disabled {
    opacity: 0.6;
    cursor: wait;
}

#joinClassMessage {
    overflow-wrap: anywhere;
    font-size: 0.9rem;
    line-height: 1.5;
}

.student-class-card {
    padding: 16px;
    margin-top: 12px;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #f5b82e;
    border-radius: 8px;
    overflow-wrap: anywhere;
}

.student-class-card h3 {
    margin-top: 0;
    color: #071d3d;
}

.student-class-card p {
    margin-bottom: 0;
    color: #667085;
    font-size: 0.9rem;
}

#teacherClassRoster {
    margin-top: 20px;
}

#teacherClassRoster[hidden] {
    display: none !important;
}

#backToTeacherClasses {
    padding: 10px 14px;
    margin-bottom: 20px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    background: #fff;
    color: #071d3d;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

#backToTeacherClasses:hover {
    background: #f2f5f9;
}

.teacher-roster-header {
    padding: 20px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: #071d3d;
    color: #fff;
}

.teacher-roster-header h2 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #f5b82e;
    overflow-wrap: anywhere;
}

.teacher-roster-header p {
    margin: 8px 0 0;
    overflow-wrap: anywhere;
}

#rosterClassCode {
    letter-spacing: 1px;
}

#teacherRosterList {
    display: grid;
    gap: 12px;
}

.teacher-roster-student {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
}

.teacher-roster-student-avatar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #071d3d;
    color: #f5b82e;
    font-weight: 700;
}

.teacher-roster-student-info {
    min-width: 0;
}

.teacher-roster-student-info h3 {
    margin: 0;
    color: #071d3d;
    overflow-wrap: anywhere;
}

.teacher-roster-student-info p {
    margin: 5px 0 0;
    color: #667085;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.teacher-class-card {
    cursor: pointer;
}

.teacher-class-card button {
    position: relative;
    z-index: 1;
}

.learn-page {
    --learn-navy: #071d3d;
    --learn-gold: #f5b82e;
    --learn-white: #ffffff;

    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 6% 70px;
    box-sizing: border-box;
    color: var(--learn-white);
    overflow-x: hidden;
}

.infinity-icon {
    height: 50pX;
    width: 50pX;
}

.infinity-stat-label {
    margin-top: -16pX;
}

.learn-page h1,
.learn-page h2,
.learn-page h3,
.learn-page p,
.learn-page blockquote,
.learn-page span,
.learn-page .stat-label,
.learn-page .stat-number,
.learn-page .quote-attribution {
    color: var(--learn-white);
}

.learn-page .learn-hero {
    width: 100%;
    max-width: 1150px;
    margin: 0 auto;
    padding: 85px 20px 75px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

.learn-page .hero-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    width: 100%;
    margin: 0 auto 25px;

    color: var(--learn-gold);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
}

.learn-page .eyebrow-line {
    display: block;
    flex: 0 0 35px;
    width: 35px;
    height: 2px;
    background: var(--learn-gold);
}

.learn-page .learn-hero h1 {
    display: block;
    width: 100%;
    max-width: 950px;
    margin: 0 auto 24px;
    padding: 0;

    color: var(--learn-white);
    font-size: clamp(2.3rem, 5vw, 4.4rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -1.5px;
    text-align: center;
    overflow-wrap: break-word;
}

.learn-page .hero-description {
    width: 100%;
    max-width: 690px;
    margin: 0 auto;

    color: var(--learn-white);
    font-size: 1.08rem;
    line-height: 1.8;
    text-align: center;
}

.learn-page .hero-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 35px;

    width: 100%;
    margin: 48px auto 0;
}

.learn-page .hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 115px;
    text-align: center;
}

.learn-page .hero-stat .stat-number {
    color: var(--learn-white);
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.2;
}

.learn-page .hero-stat .stat-label {
    color: var(--learn-white);
    font-size: 0.9rem;
    line-height: 1.5;
}

.learn-page .stat-divider {
    width: 1px;
    height: 48px;
    background: rgba(255, 255, 255, 0.3);
}

.learn-page .modules-section {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0 45px;
}

.learn-page .section-heading {
    width: 100%;
    margin: 0 auto 38px;
    text-align: center;
}

.learn-page .section-heading > div {
    width: 100%;
}

.learn-page .section-eyebrow {
    display: block;
    margin-bottom: 12px;

    color: var(--learn-gold);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.learn-page .section-heading h2 {
    margin: 0 0 14px;
    color: var(--learn-white);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    text-align: center;
}

.learn-page .section-heading p {
    margin: 0 auto;
    color: var(--learn-white);
    font-size: 1rem;
    line-height: 1.7;
    text-align: center;
}

.learn-page .module-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 28px;

    width: 100%;
    align-items: stretch;
}

.learn-page .module-card {
    grid-column: span 2;
    position: relative;
    isolation: isolate;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-width: 0;
    min-height: 270px;
    padding: 30px 27px;

    color: var(--learn-white);
    background:
        linear-gradient(
            145deg,
            rgba(17, 48, 86, 0.98),
            rgba(7, 29, 61, 0.98)
        );

    border: 1px solid rgba(245, 184, 46, 0.42);
    border-radius: 18px;

    box-shadow:
        0 0 12px rgba(245, 184, 46, 0.12),
        0 0 25px rgba(35, 104, 190, 0.16),
        inset 0 0 18px rgba(255, 255, 255, 0.025);

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.learn-page .module-card:nth-child(4):nth-last-child(2) {
    grid-column: 2 / span 2;
}

.learn-page .module-card:nth-child(5):last-child {
    grid-column: 4 / span 2;
}

.learn-page .module-card:hover {
    transform: translateY(-7px);
    border-color: var(--learn-gold);

    background:
        linear-gradient(
            145deg,
            rgba(22, 57, 99, 1),
            rgba(7, 29, 61, 1)
        );

    box-shadow:
        0 0 10px rgba(245, 184, 46, 0.45),
        0 0 25px rgba(245, 184, 46, 0.28),
        0 0 45px rgba(44, 124, 220, 0.28),
        inset 0 0 22px rgba(245, 184, 46, 0.06);
}

.learn-page .module-card h2,
.learn-page .module-card h3,
.learn-page .module-card p,
.learn-page .module-card span,
.learn-page .module-card strong,
.learn-page .module-card small {
    color: var(--learn-white);
}

.learn-page .module-card h2,
.learn-page .module-card h3 {
    margin: 0 0 14px;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.4;
}

.learn-page .module-card p {
    margin: 0 0 20px;
    font-size: 0.96rem;
    line-height: 1.75;
    opacity: 0.94;
}

.learn-page .module-card .module-number,
.learn-page .module-card .module-count,
.learn-page .module-card .module-category {
    color: var(--learn-white);
    font-size: 0.85rem;
}

.learn-page .module-card .module-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;
    margin-bottom: 22px;

    color: var(--learn-gold);
    background: rgba(245, 184, 46, 0.1);
    border: 1px solid rgba(245, 184, 46, 0.45);
    border-radius: 14px;

    box-shadow: 0 0 16px rgba(245, 184, 46, 0.12);
}

.learn-page .module-card a,
.learn-page .module-card button {
    margin-top: auto;
    color: var(--learn-white);
}

.learn-page .loading-message {
    grid-column: 1 / -1;
    margin: 20px 0;
    color: var(--learn-white);
    text-align: center;
}

.learn-page .learn-quote {
    width: 100%;
    max-width: 850px;
    margin: 65px auto 0;
    padding: 35px 25px;
    box-sizing: border-box;

    text-align: center;
    border-top: 1px solid rgba(245, 184, 46, 0.45);
    border-bottom: 1px solid rgba(245, 184, 46, 0.45);
}

.learn-page .quote-mark {
    margin-bottom: 10px;
    color: var(--learn-gold);
    font-family: Georgia, serif;
    font-size: 4rem;
    line-height: 0.8;
}

.learn-page .learn-quote blockquote {
    margin: 0 auto 18px;
    color: var(--learn-white);
    font-family: Georgia, serif;
    font-size: clamp(1.25rem, 2.5vw, 1.8rem);
    font-style: italic;
    line-height: 1.7;
    text-align: center;
}

.learn-page .quote-attribution {
    margin: 0;
    color: var(--learn-white);
    font-size: 0.9rem;
    opacity: 0.85;
}

@media (max-width: 900px) {
    .learn-page {
        padding-right: 4%;
        padding-left: 4%;
    }

    .learn-page .learn-hero {
        padding-top: 65px;
        padding-bottom: 55px;
    }

    .learn-page .module-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }

    .learn-page .module-card,
    .learn-page .module-card:nth-child(4):nth-last-child(2),
    .learn-page .module-card:nth-child(5):last-child {
        grid-column: auto;
    }

    .learn-page .module-card:nth-child(5):last-child {
        grid-column: 1 / -1;
        width: calc(50% - 11px);
        justify-self: center;
    }
}

@media (max-width: 600px) {
    .learn-page {
        padding-right: 20px;
        padding-left: 20px;
    }

    .learn-page .learn-hero {
        padding: 55px 0 45px;
    }

    .learn-page .hero-eyebrow {
        gap: 8px;
        font-size: 0.72rem;
        letter-spacing: 1px;
    }

    .learn-page .eyebrow-line {
        flex-basis: 20px;
        width: 20px;
    }

    .learn-page .learn-hero h1 {
        font-size: clamp(2.1rem, 9vw, 3rem);
        letter-spacing: -0.8px;
    }

    .learn-page .hero-description {
        font-size: 0.98rem;
        line-height: 1.7;
    }

    .learn-page .hero-stats {
        gap: 20px;
        margin-top: 35px;
    }

    .learn-page .hero-stat {
        min-width: 85px;
    }

    .learn-page .hero-stat .stat-number {
        font-size: 1.65rem;
    }

    .learn-page .hero-stat .stat-label {
        max-width: 105px;
        font-size: 0.8rem;
    }

    .learn-page .stat-divider {
        height: 38px;
    }

    .learn-page .modules-section {
        padding-top: 10px;
    }

    .learn-page .section-heading {
        margin-bottom: 28px;
    }

    .learn-page .module-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .learn-page .module-card,
    .learn-page .module-card:nth-child(4):nth-last-child(2),
    .learn-page .module-card:nth-child(5):last-child {
        grid-column: 1;
        width: 100%;
        min-height: 235px;
        padding: 25px;
    }

    .learn-page .learn-quote {
        margin-top: 45px;
        padding: 30px 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .learn-page .module-card {
        transition: none;
    }

    .learn-page .module-card:hover {
        transform: none;
    }
}

.learn-page .learn-hero h1 {
    display: block;
    width: 100%;
    max-width: 800px;
    margin: 0 auto 24px;
    padding: 0;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.2;
    letter-spacing: -0.5px;
    text-align: center;
    overflow-wrap: break-word;
    word-wrap: break-word;
    white-space: normal;
    box-sizing: border-box;
}

.learn-page .module-sequence,
.learn-page .module-meta {
    display: none !important;
}

.learn-page .module-card .module-button {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;

    width: fit-content;
    margin-top: auto;
    margin-right: auto;
    margin-left: auto;

    text-align: center;
}

.learn-page .module-card .module-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 72px;
    height: 72px;
    margin-bottom: 22px;

    overflow: hidden;
    border: 1px solid rgba(245, 184, 46, 0.5);
    border-radius: 14px;

    background: rgba(245, 184, 46, 0.08);
    box-shadow: 0 0 16px rgba(245, 184, 46, 0.15);
}

.learn-page .module-card .module-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.learn-page .learn-hero {
    padding-top: 40px;
}

.module-page {
    min-height: 100vh;
    background: #f5f2e9;
    color: #071d3d;
}

/* Navigation */

.module-page .site-header {
    background: #071d3d;
    color: #fff;
}

.module-page .navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 5%;
}

.module-page .nav-logo {
    display: flex;
    flex-direction: column;
    color: #fff;
    text-decoration: none;
    flex-shrink: 0;
}

.module-page .logo-text {
    font-size: 1.35rem;
    font-weight: 800;
}

.module-page .logo-tagline {
    color: #f5b82e;
    font-size: 0.75rem;
}

.module-page .nav-links {
    display: flex;
    align-items: center;
    gap: 24px;
}

.module-page .nav-links a {
    color: #fff;
    text-decoration: none;
}

.module-page .nav-links a:hover,
.module-page .nav-links a.active {
    color: #f5b82e;
}

.module-page .nav-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.module-page #navbarAvatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

/* Module hero */

.module-page .module-hero {
    padding: 56px 8% 44px;
    background: linear-gradient(135deg, #071d3d 0%, #123762 100%);
    color: #fff;
}

.module-page .back-link {
    display: inline-block;
    margin-bottom: 32px;
    color: #f5b82e;
    text-decoration: none;
    font-weight: 600;
}

.module-page .module-hero .module-category {
    color: #f5b82e;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.module-page .module-hero h1 {
    max-width: 850px;
    margin: 12px 0 18px;
    font-size: clamp(2.2rem, 5vw, 4rem);
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.module-page #moduleDescription {
    max-width: 760px;
    color: #e1e8f2;
    font-size: 1.05rem;
    line-height: 1.8;
}

/* Progress bar */

.module-page .module-progress-summary {
    max-width: 650px;
    margin-top: 34px;
}

.module-page .progress-labels {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 0.9rem;
}

.module-page .progress-track {
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
}

.module-page .progress-bar {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #f5b82e;
    transition: width 0.3s ease;
}

/* Lesson section */

.module-page .module-lessons-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 52px 24px 80px;
}

.module-page .lesson-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}

.module-page .section-eyebrow {
    margin: 0 0 8px;
    color: #8a6812;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.module-page .lesson-section-heading h2 {
    margin: 0;
    font-size: 2rem;
}

.module-page #lessonTotal {
    color: #5e6876;
    font-weight: 600;
}

.module-page #moduleMessage {
    color: #526071;
    line-height: 1.6;
}

.module-page .lesson-list {
    display: grid;
    gap: 16px;
}

.module-page .lesson-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px;
    border: 1px solid #e1ded4;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(7, 29, 61, 0.05);
}

.module-page .lesson-number {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #eaf0f8;
    color: #071d3d;
    font-weight: 800;
}

.module-page .lesson-card-content {
    flex: 1;
    min-width: 0;
}

.module-page .lesson-card h3 {
    margin: 0 0 7px;
    font-size: 1.1rem;
    line-height: 1.4;
}

.module-page .lesson-card p {
    margin: 0;
    color: #687385;
    font-size: 0.9rem;
    line-height: 1.6;
}

.module-page .lesson-card .lesson-status {
    margin-top: 8px;
    color: #8a6812;
    font-size: 0.8rem;
    font-weight: 700;
}

.module-page .lesson-card.completed .lesson-number {
    background: #e1f3e5;
    color: #176534;
}

.module-page .lesson-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 17px;
    border-radius: 8px;
    background: #071d3d;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.module-page .lesson-button:hover {
    background: #123762;
}

/* Footer */

.module-page .site-footer {
    padding: 24px;
    background: #071d3d;
    color: #fff;
    text-align: center;
}

.module-page .site-footer p {
    margin: 0;
    font-size: 0.9rem;
}

/* Responsive layout */

@media (max-width: 850px) {
    .module-page .navbar {
        flex-wrap: wrap;
    }

    .module-page .nav-links {
        order: 3;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 16px;
    }

    .module-page .module-hero {
        padding: 40px 6%;
    }
}

@media (max-width: 560px) {
    .module-page .nav-profile {
        gap: 6px;
        font-size: 0.85rem;
    }

    .module-page .module-lessons-section {
        padding: 36px 16px 56px;
    }

    .module-page .lesson-card {
        flex-wrap: wrap;
        padding: 16px;
    }

    .module-page .lesson-card-content {
        flex-basis: calc(100% - 70px);
    }

    .module-page .lesson-button {
        width: 100%;
    }

    .module-page .lesson-section-heading {
        align-items: start;
        flex-direction: column;
    }
}

.lesson-page {
    min-height: 100vh;
    background: #f5f2e9;
    color: #071d3d;
}

.lesson-page .site-header {
    background: #071d3d;
    color: #fff;
}

.lesson-page .navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 5%;
}

.lesson-page .nav-logo {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    color: #fff;
    text-decoration: none;
}

.lesson-page .logo-text {
    font-size: 1.35rem;
    font-weight: 800;
}

.lesson-page .logo-tagline {
    color: #f5b82e;
    font-size: 0.75rem;
}

.lesson-page .nav-links {
    display: flex;
    align-items: center;
    gap: 24px;
}

.lesson-page .nav-links a {
    color: #fff;
    text-decoration: none;
}

.lesson-page .nav-links a:hover,
.lesson-page .nav-links a.active {
    color: #f5b82e;
}

.lesson-page .nav-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.lesson-page #navbarAvatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

/* Lesson page layout */

.lesson-page .lesson-main {
    max-width: 1250px;
    margin: 0 auto;
    padding: 32px 28px 80px;
}

.lesson-page .lesson-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
}

.lesson-page .lesson-back-link {
    color: #071d3d;
    text-decoration: none;
    font-weight: 700;
}

.lesson-page .lesson-back-link:hover {
    color: #8a6812;
}

.lesson-page .lesson-number-label {
    padding: 8px 12px;
    border: 1px solid #e2d8bd;
    border-radius: 999px;
    background: #fffaf0;
    color: #76570b;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1px;
}

.lesson-page .lesson-heading {
    padding: 40px;
    border-radius: 20px;
    background: linear-gradient(135deg, #071d3d, #153d69);
    color: #fff;
    box-shadow: 0 10px 28px rgba(7, 29, 61, 0.12);
}

.lesson-page .lesson-eyebrow {
    margin: 0 0 9px;
    color: #a77d16;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.lesson-page .lesson-heading .lesson-eyebrow {
    color: #f5b82e;
}

.lesson-page .lesson-heading {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.lesson-page .lesson-heading h1 {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    font-size: clamp(1.6rem, 4vw, 3.2rem);
    line-height: 1.2;
}

.lesson-page .lesson-subtitle {
    max-width: 780px;
    margin: 0;
    color: #e1e8f2;
    font-size: 1.05rem;
    line-height: 1.8;
}

.lesson-page .lesson-progress-summary {
    max-width: 700px;
    margin-top: 30px;
}

.lesson-page .lesson-progress-labels {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 0.85rem;
}

.lesson-page .lesson-progress-track {
    height: 11px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
}

.lesson-page .lesson-progress-bar {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #f5b82e;
    transition: width 0.3s ease;
}

/* Main content and sidebar */

.lesson-page .lesson-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    align-items: start;
    gap: 26px;
    margin-top: 28px;
}

.lesson-page .lesson-content-panel {
    min-width: 0;
    padding: 34px;
    border: 1px solid #e4e0d6;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(7, 29, 61, 0.04);
}

.lesson-page .lesson-text-section {
    margin-bottom: 34px;
}

.lesson-page .lesson-text-section h2 {
    margin: 0 0 14px;
    font-size: 1.45rem;
    line-height: 1.35;
}

.lesson-page .lesson-text-section p {
    margin: 0 0 16px;
    color: #475569;
    font-size: 1rem;
    line-height: 1.9;
}

.lesson-page .lesson-key-idea {
    padding: 22px;
    border-left: 5px solid #f5b82e;
    border-radius: 8px;
    background: #fff8e6;
}

.lesson-page .key-idea-label {
    color: #76570b;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.lesson-page .lesson-key-idea p {
    margin: 9px 0 0;
    color: #26384e;
    line-height: 1.8;
    font-weight: 600;
}

/* Knowledge check */

.lesson-page .knowledge-check {
    margin-top: 38px;
    padding: 26px;
    border: 1px solid #dce4ef;
    border-radius: 14px;
    background: #f5f8fc;
}

.lesson-page .knowledge-check[hidden] {
    display: none;
}

.lesson-page .knowledge-check-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.lesson-page .knowledge-check-heading .lesson-eyebrow {
    margin-bottom: 5px;
}

.lesson-page .knowledge-check-heading h2 {
    margin: 0;
    font-size: 1.4rem;
}

.lesson-page .knowledge-check-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #071d3d;
    color: #f5b82e;
    font-size: 1.4rem;
    font-weight: 800;
}

.lesson-page .question-text {
    margin-bottom: 18px;
    font-weight: 700;
    line-height: 1.7;
}

.lesson-page .answer-options {
    display: grid;
    gap: 11px;
    margin-bottom: 20px;
}

.lesson-page .answer-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px;
    border: 1px solid #dce2eb;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    line-height: 1.6;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.lesson-page .answer-option:hover {
    border-color: #b28a26;
    background: #fffaf0;
}

.lesson-page .answer-option input {
    flex-shrink: 0;
    margin-top: 5px;
    accent-color: #071d3d;
}

.lesson-page .answer-feedback {
    margin: 14px 0 0;
    font-size: 0.95rem;
    line-height: 1.7;
}

.lesson-page .answer-correct {
    color: #176534;
}

.lesson-page .answer-incorrect {
    color: #a52c2c;
}

/* Buttons and completion status */

.lesson-page .lesson-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid #e7e5df;
}

.lesson-page .lesson-primary-button,
.lesson-page .lesson-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 12px 17px;
    border: 0;
    border-radius: 9px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 750;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.lesson-page .lesson-primary-button {
    background: #071d3d;
    color: #fff;
}

.lesson-page .lesson-primary-button:hover:not(:disabled) {
    transform: translateY(-1px);
    background: #153d69;
}

.lesson-page .lesson-primary-button:disabled {
    background: #a5afbd;
    cursor: not-allowed;
}

.lesson-page .lesson-secondary-button {
    border: 1px solid #d8dce3;
    background: #fff;
    color: #071d3d;
}

.lesson-page .lesson-secondary-button:hover {
    border-color: #b28a26;
    background: #fff8e6;
}

.lesson-page .lesson-secondary-button.is-disabled {
    opacity: 0.5;
}

.lesson-page .lesson-status-message {
    margin-top: 18px;
    color: #a52c2c;
    font-size: 0.9rem;
    line-height: 1.7;
}

.lesson-page .lesson-status-message.status-success {
    color: #176534;
}

/* Sidebar cards */

.lesson-page .lesson-sidebar {
    display: grid;
    gap: 18px;
}

.lesson-page .lesson-sidebar-card,
.lesson-page .lesson-tip-card {
    padding: 24px;
    border: 1px solid #e4e0d6;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(7, 29, 61, 0.04);
}

.lesson-page .lesson-sidebar-card h2 {
    margin: 0 0 12px;
    font-size: 1.4rem;
}

.lesson-page .lesson-sidebar-card > p:not(.lesson-eyebrow),
.lesson-page .lesson-tip-card p {
    color: #647184;
    font-size: 0.92rem;
    line-height: 1.8;
}

.lesson-page .lesson-sidebar-divider {
    height: 1px;
    margin: 22px 0;
    background: #e8e5de;
}

.lesson-page .lesson-sidebar-stat {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    color: #5b6675;
    font-size: 0.88rem;
}

.lesson-page .lesson-sidebar-stat strong {
    color: #071d3d;
}

.lesson-page .lesson-sidebar-link {
    display: inline-block;
    margin-top: 10px;
    color: #071d3d;
    font-weight: 800;
    text-decoration: none;
}

.lesson-page .lesson-sidebar-link:hover {
    color: #8a6812;
}

.lesson-page .lesson-tip-card {
    border-color: #e8d7a6;
    background: #fff8e6;
}

.lesson-page .lesson-tip-icon {
    color: #b28a26;
    font-size: 1.6rem;
}

.lesson-page .lesson-tip-card h3 {
    margin: 12px 0 8px;
    font-size: 1.1rem;
}

/* Lessons still being prepared */

.lesson-page .lesson-coming-soon {
    padding: 40px 20px;
    text-align: center;
}

.lesson-page .coming-soon-star {
    color: #b28a26;
    font-size: 2.5rem;
}

.lesson-page .lesson-coming-soon h2 {
    margin: 16px 0 12px;
}

.lesson-page .lesson-coming-soon p {
    max-width: 550px;
    margin: 10px auto;
    color: #647184;
    line-height: 1.8;
}

/* Footer */

.lesson-page .site-footer {
    padding: 24px;
    background: #071d3d;
    color: #fff;
    text-align: center;
}

.lesson-page .site-footer p {
    margin: 0;
    font-size: 0.9rem;
}

/* Responsive */

@media (max-width: 950px) {
    .lesson-page .lesson-layout {
        grid-template-columns: 1fr;
    }

    .lesson-page .lesson-sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 750px) {
    .lesson-page .navbar {
        flex-wrap: wrap;
    }

    .lesson-page .nav-links {
        order: 3;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 16px;
    }

    .lesson-page .lesson-main {
        padding: 24px 16px 50px;
    }

    .lesson-page .lesson-heading {
        padding: 28px 22px;
    }

    .lesson-page .lesson-content-panel {
        padding: 24px 18px;
    }

    .lesson-page .lesson-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .lesson-page .lesson-primary-button,
    .lesson-page .lesson-secondary-button {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .lesson-page .nav-profile {
        gap: 6px;
        font-size: 0.82rem;
    }

    .lesson-page .lesson-sidebar {
        grid-template-columns: 1fr;
    }

    .lesson-page .lesson-number-label {
        font-size: 0.65rem;
    }

    .lesson-page .knowledge-check {
        padding: 20px 15px;
    }

    .lesson-page .lesson-progress-labels {
        font-size: 0.78rem;
    }
}

.leaderboard-page {
    --leaderboard-navy: #071d3d;
    --leaderboard-gold: #f5b82e;
    --leaderboard-light-gold: #fff4d6;
    --leaderboard-background: #f5f3ed;
    --leaderboard-white: #ffffff;
    --leaderboard-text: #18253a;
    --leaderboard-muted: #697589;
    --leaderboard-border: #e4e7ed;

    margin: 0;
    background: var(--leaderboard-background);
    color: var(--leaderboard-text);
    font-family: Arial, Helvetica, sans-serif;
}

.leaderboard-page button,
.leaderboard-page select {
    font: inherit;
}

.leaderboard-page a {
    text-decoration: none;
}


/* PAGE INTRODUCTION */

.leaderboard-container {
    width: min(1120px, 90%);
    margin: 42px auto 64px;
}

.leaderboard-intro {
    margin-bottom: 28px;
}

.leaderboard-eyebrow {
    margin-bottom: 10px;
    color: #8a6410;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

.leaderboard-intro h1 {
    margin: 0 0 12px;
    color: var(--leaderboard-navy);
    font-size: clamp(30px, 4vw, 42px);
}

.leaderboard-intro p {
    max-width: 650px;
    margin: 0;
    color: var(--leaderboard-muted);
    line-height: 1.7;
}

/* MAIN LEADERBOARD PANEL */

.leaderboard-panel {
    overflow: hidden;
    background: var(--leaderboard-white);
    border: 1px solid var(--leaderboard-border);
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(7, 29, 61, 0.06);
}

.leaderboard-panel-header {
    padding: 24px 26px;
    background: var(--leaderboard-navy);
    color: white;
}

.leaderboard-panel-header h2 {
    margin: 0 0 7px;
    font-size: 22px;
}

.leaderboard-panel-header p {
    margin: 0;
    color: #d7dfec;
    font-size: 13px;
    line-height: 1.6;
}

/* GLOBAL / CLASS TABS */

.leaderboard-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--leaderboard-border);
}

.leaderboard-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.leaderboard-tab {
    padding: 10px 16px;
    border: 1px solid var(--leaderboard-border);
    border-radius: 8px;
    background: white;
    color: var(--leaderboard-navy);
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.leaderboard-tab:hover {
    border-color: var(--leaderboard-gold);
}

.leaderboard-tab.active {
    border-color: var(--leaderboard-navy);
    background: var(--leaderboard-navy);
    color: white;
}

.leaderboard-tab:focus-visible,
.leaderboard-class-selector:focus-visible {
    outline: 3px solid var(--leaderboard-gold);
    outline-offset: 3px;
}

.leaderboard-class-selector {
    display: block;
    min-width: 190px;
    max-width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--leaderboard-border);
    border-radius: 8px;
    background: white;
    color: var(--leaderboard-text);
}

/* RANKINGS TABLE */

.leaderboard-table-wrap {
    overflow-x: auto;
}

.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.leaderboard-table th {
    padding: 15px 20px;
    background: #fafbfc;
    color: var(--leaderboard-muted);
    font-size: 11px;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    white-space: nowrap;
}

.leaderboard-table td {
    padding: 16px 20px;
    border-top: 1px solid var(--leaderboard-border);
    font-size: 14px;
    white-space: nowrap;
}

.leaderboard-table tbody tr.current-user {
    background: var(--leaderboard-light-gold);
}

.leaderboard-table tbody tr.current-user td:first-child {
    border-left: 4px solid var(--leaderboard-gold);
}

.leaderboard-rank {
    width: 80px;
    color: var(--leaderboard-navy);
    font-weight: 700;
}

.leaderboard-student {
    display: flex;
    align-items: center;
    gap: 12px;
}

.leaderboard-student-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    background: #e9edf3;
}

.leaderboard-student-name {
    color: var(--leaderboard-navy);
    font-weight: 700;
}

.leaderboard-you-label {
    display: inline-block;
    margin-left: 6px;
    padding: 3px 6px;
    border-radius: 5px;
    background: #f5df9f;
    color: #684b08;
    font-size: 10px;
    font-weight: 700;
}

.leaderboard-level {
    color: var(--leaderboard-navy);
    font-weight: 700;
}

.leaderboard-xp {
    color: #946700;
    font-weight: 700;
}

/* LOADING, EMPTY AND ERROR STATES */

.leaderboard-message {
    padding: 38px 20px;
    color: var(--leaderboard-muted);
    text-align: center;
    line-height: 1.7;
}

.leaderboard-message strong {
    display: block;
    margin-bottom: 7px;
    color: var(--leaderboard-navy);
    font-size: 17px;
}

.leaderboard-panel .leaderboard-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--leaderboard-border);
    color: var(--leaderboard-muted);
    font-size: 12px;
    line-height: 1.6;
}

/* PAGE FOOTER */

.leaderboard-footer-main {
    padding: 24px 5%;
    background: var(--leaderboard-navy);
    color: #d7dfec;
    text-align: center;
    font-size: 12px;
}

.leaderboard-footer-main a {
    color: var(--leaderboard-gold);
}

/* RESPONSIVE LAYOUT */

@media (max-width: 850px) {
    .leaderboard-page .navbar {
        flex-wrap: wrap;
    }

    .leaderboard-page .navbar-links {
        order: 3;
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 18px;
    }
}

@media (max-width: 540px) {
    .leaderboard-container {
        width: 94%;
        margin-top: 28px;
    }

    .leaderboard-page .navbar {
        padding: 14px 4%;
        gap: 14px;
    }

    .leaderboard-page .logo-copy strong {
        font-size: 16px;
    }

    .leaderboard-page .logo-copy span {
        font-size: 9px;
    }

    .leaderboard-page .logo-img {
        width: 38px;
        height: 38px;
    }

    .leaderboard-page .navbar-user {
        gap: 7px;
    }

    .leaderboard-page .xp-display {
        padding: 7px;
        font-size: 11px;
    }

    .leaderboard-page #navbarUsername {
        display: none;
    }

    .leaderboard-panel-header,
    .leaderboard-controls {
        padding: 18px;
    }

    .leaderboard-table th,
    .leaderboard-table td {
        padding: 13px 12px;
    }
}

.play-page {
    --play-navy: #071d3d;
    --play-gold: #f5b82e;
    --play-gold-hover: #e5a916;
    --play-text: #071d3d;
    --play-muted: #657187;
    --play-border: #dce2eb;
    --play-surface: #ffffff;
    --play-background: #f5f2e9;
    background: var(--play-background);
    color: var(--play-text);
}


/* =========================================
   MAIN LAYOUT
========================================= */

.play-main {
    width: min(1120px, 92%);
    margin: 0 auto;
    padding: 48px 0 72px;
}

.play-page [hidden] {
    display: none !important;
}


/* =========================================
   PAGE INTRODUCTION
========================================= */

.play-hero {
    padding: 36px 38px;
    margin-bottom: 42px;
    background: var(--play-navy);
    color: #ffffff;
    border-radius: 14px;
    border-bottom: 5px solid var(--play-gold);
}

.play-eyebrow {
    margin: 0 0 12px;
    color: #b88612;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.play-hero .play-eyebrow {
    color: var(--play-gold);
}

.play-hero h1 {
    margin: 0 0 14px;
    color: #ffffff;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.15;
}

.play-intro {
    max-width: 680px;
    margin: 0;
    color: #e1e8f2;
    font-size: 1rem;
    line-height: 1.8;
}

.play-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 30px;
}

.play-summary-item {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 9px;
}

.summary-label {
    color: #d4deeb;
    font-size: 0.82rem;
}

.play-summary-item strong {
    color: var(--play-gold);
    font-size: 1.45rem;
}


/* =========================================
   SECTION HEADINGS
========================================= */

.play-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.play-section-heading h2 {
    margin: 0 0 10px;
    color: var(--play-navy);
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.play-section-heading p:not(.play-eyebrow) {
    margin: 0;
    color: var(--play-muted);
    line-height: 1.7;
}


/* =========================================
   TOPIC SELECTION CARDS
========================================= */

.play-topic-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.play-topic-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    min-height: 220px;
    padding: 25px;
    background: var(--play-surface);
    color: var(--play-text);
    text-align: left;
    font: inherit;
    border: 1px solid var(--play-border);
    border-radius: 12px;
    border-top: 4px solid var(--play-gold);
    cursor: pointer;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.play-topic-card:hover {
    transform: translateY(-3px);
    border-color: var(--play-gold);
    box-shadow: 0 8px 22px rgba(7, 29, 61, 0.09);
}

.play-topic-card:focus-visible {
    outline: 3px solid var(--play-gold);
    outline-offset: 4px;
}

.topic-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    background: #fff4d5;
    border-radius: 10px;
    font-size: 1.5rem;
}

#mixed-topic-icon {
    color: #f5b82e;
}

.topic-card-content {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.topic-card-content strong {
    color: var(--play-navy);
    font-size: 1.12rem;
    line-height: 1.4;
}

.topic-card-content > span {
    color: var(--play-muted);
    font-size: 0.92rem;
    line-height: 1.7;
}

.topic-card-action {
    margin-top: auto;
    padding-top: 22px;
    color: #8a6500;
    font-size: 0.9rem;
    font-weight: 750;
}

.play-note {
    margin: 22px 0 0;
    color: var(--play-muted);
    font-size: 0.85rem;
    line-height: 1.7;
}


/* =========================================
   GAME HEADER AND PROGRESS
========================================= */

.play-game-section {
    max-width: 850px;
    margin: 0 auto;
}

.game-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
}

.play-back-button {
    padding: 10px 0;
    background: transparent;
    color: var(--play-navy);
    font: inherit;
    font-weight: 700;
    border: none;
    cursor: pointer;
}

.play-back-button:hover {
    color: #8a6500;
}

.game-xp-display {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #8a6500;
    font-weight: 750;
}

.game-xp-display span:first-child {
    color: #b88612;
    font-size: 1.25rem;
}

.game-progress {
    margin-bottom: 24px;
}

.game-progress-labels {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    color: var(--play-muted);
    font-size: 0.88rem;
    font-weight: 650;
}

.game-progress-track {
    width: 100%;
    height: 9px;
    overflow: hidden;
    background: #e2e7ef;
    border-radius: 99px;
}

.game-progress-fill {
    width: 0;
    height: 100%;
    background: var(--play-gold);
    border-radius: inherit;
    transition: width 0.25s ease;
}


/* =========================================
   QUESTION CARD
========================================= */

.question-card {
    padding: clamp(22px, 5vw, 42px);
    background: var(--play-surface);
    border: 1px solid var(--play-border);
    border-radius: 14px;
    box-shadow: 0 5px 20px rgba(7, 29, 61, 0.04);
}

.question-category {
    margin: 0 0 16px;
    color: #8a6500;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.question-card h2 {
    margin: 0;
    color: var(--play-navy);
    font-size: clamp(1.35rem, 3vw, 1.85rem);
    line-height: 1.5;
}

.question-instruction {
    margin: 12px 0 24px;
    color: var(--play-muted);
    font-size: 0.92rem;
}


/* =========================================
   ANSWER OPTIONS
========================================= */

.answer-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.answer-option {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 15px 17px;
    background: #ffffff;
    color: var(--play-text);
    text-align: left;
    font: inherit;
    border: 1px solid var(--play-border);
    border-radius: 9px;
    cursor: pointer;
    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}

.answer-option:hover:not(:disabled) {
    background: #fffaf0;
    border-color: var(--play-gold);
}

.answer-option:focus-visible {
    outline: 3px solid var(--play-gold);
    outline-offset: 3px;
}

.answer-option.selected {
    background: #fff7df;
    border-color: var(--play-gold);
}

.answer-option.correct {
    background: #e9f7ee;
    border-color: #36945c;
}

.answer-option.incorrect {
    background: #fff0ef;
    border-color: #c94d4d;
}

.answer-option:disabled {
    cursor: default;
    opacity: 1;
}

.answer-option-letter {
    display: flex;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: #eef1f6;
    color: var(--play-navy);
    border-radius: 7px;
    font-weight: 800;
}

.answer-option.selected .answer-option-letter {
    background: var(--play-navy);
    color: #ffffff;
}

.answer-option.correct .answer-option-letter {
    background: #247846;
    color: #ffffff;
}

.answer-option.incorrect .answer-option-letter {
    background: #b73535;
    color: #ffffff;
}


/* =========================================
   ANSWER FEEDBACK
========================================= */

.answer-feedback {
    margin-top: 22px;
    padding: 17px 19px;
    background: #f0f5fc;
    border-left: 4px solid var(--play-navy);
    border-radius: 6px;
}

.answer-feedback.correct-feedback {
    background: #e9f7ee;
    border-left-color: #36945c;
}

.answer-feedback.incorrect-feedback {
    background: #fff3e7;
    border-left-color: #d18b25;
}

.answer-feedback strong {
    display: block;
    margin-bottom: 7px;
    color: var(--play-navy);
}

.answer-feedback p {
    margin: 0;
    color: #45536a;
    font-size: 0.92rem;
    line-height: 1.75;
}


/* =========================================
   BUTTONS
========================================= */

.question-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 28px;
}

.question-xp {
    color: var(--play-muted);
    font-size: 0.88rem;
}

.play-primary-button,
.play-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 12px 22px;
    font: inherit;
    font-size: 0.94rem;
    font-weight: 750;
    border-radius: 8px;
    cursor: pointer;
    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.play-primary-button {
    background: var(--play-gold);
    color: var(--play-navy);
    border: 1px solid var(--play-gold);
}

.play-primary-button:hover:not(:disabled) {
    background: var(--play-gold-hover);
    border-color: var(--play-gold-hover);
    transform: translateY(-1px);
}

.play-primary-button:disabled {
    background: #e6e8ec;
    color: #8b929e;
    border-color: #e6e8ec;
    cursor: not-allowed;
}

.play-secondary-button {
    background: #ffffff;
    color: var(--play-navy);
    border: 1px solid var(--play-border);
}

.play-secondary-button:hover {
    background: #f0f3f8;
    border-color: #b9c4d5;
}

.play-primary-button:focus-visible,
.play-secondary-button:focus-visible,
.play-back-button:focus-visible {
    outline: 3px solid #b88612;
    outline-offset: 3px;
}


/* =========================================
   RESULTS SCREEN
========================================= */

.play-results-section {
    max-width: 760px;
    margin: 20px auto 0;
}

.results-card {
    padding: clamp(24px, 5vw, 44px);
    background: #ffffff;
    text-align: center;
    border: 1px solid var(--play-border);
    border-top: 5px solid var(--play-gold);
    border-radius: 14px;
    box-shadow: 0 5px 20px rgba(7, 29, 61, 0.05);
}

.results-card h2 {
    margin: 0 0 12px;
    color: var(--play-navy);
    font-size: clamp(1.7rem, 4vw, 2.4rem);
}

.results-card > p:not(.play-eyebrow) {
    color: var(--play-muted);
    line-height: 1.7;
}

.results-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 30px 0;
}

.result-stat {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 12px;
    background: #f5f7fb;
    border: 1px solid var(--play-border);
    border-radius: 9px;
}

.result-stat span {
    color: var(--play-muted);
    font-size: 0.82rem;
}

.result-stat strong {
    color: var(--play-navy);
    font-size: 1.7rem;
}

.results-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 25px;
}


/* =========================================
   FOOTER
========================================= */

.play-page .site-footer {
    margin-top: 0;
}


/* =========================================
   RESPONSIVE DESIGN
========================================= */

@media (max-width: 760px) {
    .play-main {
        width: min(100% - 32px, 600px);
        padding: 28px 0 48px;
    }

    .play-hero {
        padding: 27px 22px;
        margin-bottom: 32px;
    }

    .play-summary {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 24px;
    }

    .play-summary-item {
        padding: 13px 15px;
    }

    .play-topic-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .play-topic-card {
        min-height: 190px;
        padding: 21px;
    }

    .game-topbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .question-card {
        padding: 23px 18px;
    }

    .question-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .question-actions .play-primary-button {
        width: 100%;
    }

    .results-stats {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .result-stat {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 15px;
    }

    .result-stat strong {
        font-size: 1.4rem;
    }

    .results-actions {
        flex-direction: column;
    }

    .results-actions button {
        width: 100%;
    }
}


/* =========================================
   REDUCED MOTION ACCESSIBILITY
========================================= */

@media (prefers-reduced-motion: reduce) {
    .play-page *,
    .play-page *::before,
    .play-page *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

#organization-type {
    background-color: #071d3d;
    color: #f5b82e;
    border: 1px solid #f5b82e;
}

/* Dropdown options */
#organization-type option {
    background-color: #071d3d;
    color: #f5b82e;
}

/* Dropdown when selected or focused */
#organization-type:focus {
    outline: none;
    border-color: #f5b82e;
    box-shadow: 0 0 5px #f5b82e;
}


/* =========================================
   ADMINISTRATOR DASHBOARD
========================================= */

.administrator-organization-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 24px 0 16px;
}

.administrator-organization-details > div {
    min-width: 0;
    padding: 18px;
    border: 1px solid rgba(245, 184, 46, 0.3);
    border-radius: 12px;
    background: rgba(7, 29, 61, 0.04);
}

.administrator-detail-label {
    display: block;
    margin-bottom: 9px;
    color: #666;
    font-size: 0.85rem;
}

.administrator-organization-details h3 {
    margin: 0;
    overflow-wrap: anywhere;
    color: #071d3d;
    font-size: 1rem;
}

.administrator-code-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

#copyOrganizationCodeButton {
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    background: #071d3d;
    color: #f5b82e;
    cursor: pointer;
    font-weight: 600;
}

#copyOrganizationCodeButton:hover {
    background: #123565;
}

#organizationMessage {
    margin-top: 12px;
    line-height: 1.5;
}

#districtSchoolsList,
#administratorTeachersList,
#administratorClassesList,
#administratorStudentsList {
    width: 100%;
    overflow-wrap: anywhere;
}

#districtSchoolsList > *,
#administratorTeachersList > *,
#administratorClassesList > *,
#administratorStudentsList > * {
    margin-top: 10px;
}

@media (max-width: 900px) {
    .administrator-organization-details {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .administrator-organization-details > div {
        padding: 14px;
    }

    .administrator-code-row {
        align-items: flex-start;
        flex-direction: column;
    }
}



/* =========================================
   TEACHER ASSIGNMENTS
========================================= */

.teacher-assignments-panel {
    margin-top: 28px;
    padding: 24px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 5px 18px rgba(7, 29, 61, 0.06);
}

.teacher-assignments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}

.teacher-assignments-header h2,
.assignment-lesson-heading h3 {
    margin: 0 0 6px;
    color: #071d3d;
}

.teacher-assignments-header p,
.assignment-lesson-heading p {
    margin: 4px 0;
    color: #64748b;
}

.teacher-assignments-panel button {
    cursor: pointer;
}

.teacher-assignments-panel button:not(:disabled) {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.teacher-assignments-panel button:not(:disabled):hover {
    opacity: 0.92;
}

#createAssignmentForm {
    display: grid;
    gap: 10px;
    margin: 20px 0 28px;
    padding: 20px;
    border: 1px solid #dbe3ee;
    border-radius: 12px;
    background: #f8fafc;
}

#createAssignmentForm[hidden] {
    display: none !important;
}

#createAssignmentForm label {
    margin-top: 8px;
    color: #071d3d;
    font-weight: 600;
}

#createAssignmentForm input,
#createAssignmentForm select,
#createAssignmentForm textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    color: #172033;
    font: inherit;
}

#createAssignmentForm textarea {
    resize: vertical;
}

.assignment-lesson-heading {
    margin-top: 16px;
}

#assignmentSelectedCount {
    font-weight: 700;
    color: #071d3d;
}

#assignmentLessonPicker {
    display: grid;
    gap: 14px;
    margin-top: 8px;
}

.assignment-module-group {
    padding: 14px;
    border: 1px solid #dbe3ee;
    border-radius: 10px;
    background: #ffffff;
}

.assignment-module-group h4 {
    margin: 0 0 10px;
    color: #071d3d;
}

.assignment-lesson-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    color: #243247;
    font-weight: 400 !important;
}

.assignment-lesson-option input {
    width: auto !important;
    margin-top: 4px;
    accent-color: #071d3d;
}

.assignment-lesson-option span {
    line-height: 1.45;
}

.assignment-card {
    margin-top: 14px;
    padding: 18px;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #f5b82e;
    border-radius: 12px;
    background: #ffffff;
}

.assignment-card h3 {
    margin: 0 0 8px;
    color: #071d3d;
}

.assignment-card p {
    margin: 6px 0;
    color: #475569;
    overflow-wrap: anywhere;
}

.assignment-card .assignment-lesson-list {
    padding-left: 22px;
    color: #334155;
}

.assignment-status {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #fff3c4;
    color: #594100;
    font-size: 0.85rem;
    font-weight: 700;
}

#assignmentFormMessage {
    margin: 6px 0 0;
    color: #217a3c;
}

#assignmentFormMessage.error {
    color: #b42318;
}

@media (max-width: 600px) {
    .teacher-assignments-panel {
        padding: 16px;
    }

    #createAssignmentForm {
        padding: 14px;
    }
}

#assignmentLessonPicker {
    display: block;
    width: 100%;
    max-height: 420px;
    min-height: 120px;
    overflow-y: auto;
    padding: 12px;
    margin: 12px 0;
    border: 1px solid #d5dbea;
    border-radius: 10px;
    background: #fff;
    color: #071d3d;
}

#assignmentLessonPicker label,
#assignmentLessonPicker .assignment-lesson-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px;
    cursor: pointer;
}

#assignmentLessonPicker input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 4px;
}


.assignments-panel {
    scroll-margin-top: 100px;
}

.student-assignment-card {
    background: #ffffff;
    border: 1px solid #e1e7ef;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 14px;
    overflow-wrap: anywhere;
}

.student-assignment-card h3 {
    color: #071d3d;
    margin: 0 0 8px;
}

.student-assignment-card h4 {
    color: #071d3d;
    margin: 16px 0 8px;
}

.assignment-class-name,
.assignment-due-date {
    color: #596579;
    font-size: 0.9rem;
}

.assignment-instructions {
    line-height: 1.5;
}

.student-assignment-lessons {
    padding-left: 22px;
}

.student-assignment-lessons li {
    margin: 8px 0;
}

.student-assignment-lessons a {
    color: #f5b82e;
    text-decoration: underline;
}

.assignment-lesson-complete {
    color: #217a3c;
    font-weight: 600;
}


/* =========================================
   STUDENT ASSIGNMENT SUBMISSION BUTTON
========================================= */

.submit-assignment-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 12px 22px;
    margin-top: 10px;

    background-color: #071d3d;
    color: #f5b82e;
    border: 2px solid #f5b82e;
    border-radius: 10px;

    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.2px;

    cursor: pointer;
    box-shadow: 0 3px 8px rgba(7, 29, 61, 0.15);

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

/* Hover effect before submission */
.submit-assignment-button:not(:disabled):hover {
    background-color: #f5b82e;
    color: #071d3d;
    border-color: #f5b82e;
    box-shadow: 0 5px 12px rgba(245, 184, 46, 0.3);
    transform: translateY(-2px);
}

/* Keyboard accessibility */
.submit-assignment-button:focus-visible {
    outline: 3px solid #f5b82e;
    outline-offset: 4px;
}

/* Disabled states, including incomplete lessons */
.submit-assignment-button:disabled {
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 0.72;
}

/* Submitted successfully */
.submit-assignment-button.is-submitted {
    background-color: #e7f6ec;
    color: #217a3c;
    border: 2px solid #a8d9b5;
    opacity: 1;
    cursor: default;
}

/* Currently submitting */
.submit-assignment-button.is-submitting {
    background-color: #e8edf4;
    color: #46566c;
    border: 2px solid #c5cfdd;
    opacity: 1;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .submit-assignment-button {
        transition: none;
    }

    .submit-assignment-button:not(:disabled):hover {
        transform: none;
    }
}


/* ========================================
   EDUCATORS PAGE
======================================== */

.educators-page {
    --educators-navy: #071d3d;
    --educators-gold: #f5b82e;
    --educators-white: #ffffff;
    --educators-muted: #5c6b80;
    --educators-light: #f4f7fb;

    margin: 0;
    color: var(--educators-navy);
    background: var(--educators-white);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
}

.educators-page *,
.educators-page *::before,
.educators-page *::after {
    box-sizing: border-box;
}

.educators-page a {
    text-decoration: none;
}

.educators-header {
    position: relative;
    z-index: 10;
    background: var(--educators-white);
    border-bottom: 1px solid #e7ebf1;
}

.educators-nav {
    width: min(1200px, 92%);
    min-height: 82px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.educators-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--educators-navy);
    font-size: 1.1rem;
    font-weight: 800;
    flex-shrink: 0;
}

.educators-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.educators-nav-links {
    display: flex;
    align-items: center;
    gap: 26px;
}

.educators-nav-links a {
    color: var(--educators-navy);
    font-size: 0.93rem;
    font-weight: 600;
    transition: color 0.2s ease;
}

.educators-nav-links a:hover,
.educators-nav-links a.active {
    color: #a66b00;
}

.educators-nav-links .educators-nav-cta {
    padding: 10px 19px;
    color: var(--educators-navy);
    background: var(--educators-gold);
    border-radius: 7px;
}

.educators-nav-links .educators-nav-cta:hover {
    color: var(--educators-navy);
    background: #ffd36b;
}


/* HERO */

.educators-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 65px;
    padding: 95px max(4%, calc((100% - 1200px) / 2));
    color: var(--educators-white);
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(245, 184, 46, 0.16),
            transparent 35%
        ),
        var(--educators-navy);
}

.educators-hero-content {
    max-width: 660px;
}

.educators-eyebrow {
    margin: 0 0 17px;
    color: #b67a00;
    font-size: 0.77rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.educators-hero .educators-eyebrow,
.educators-cta .educators-eyebrow {
    color: var(--educators-gold);
}

.educators-hero h1 {
    margin: 0 0 23px;
    font-size: clamp(2.5rem, 4.4vw, 4.3rem);
    line-height: 1.12;
    letter-spacing: -1.8px;
}

.educators-hero h1 span {
    display: block;
    margin-top: 8px;
    color: var(--educators-gold);
}

.educators-hero-description {
    max-width: 590px;
    margin: 0;
    color: #d5dfed;
    font-size: 1.08rem;
    line-height: 1.85;
}

.educators-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

.educators-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 49px;
    padding: 13px 22px;
    border: 2px solid transparent;
    border-radius: 7px;
    font-size: 0.92rem;
    font-weight: 800;
    text-align: center;
    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.educators-button:hover {
    transform: translateY(-2px);
}

.educators-button-gold {
    color: var(--educators-navy);
    background: var(--educators-gold);
}

.educators-button-gold:hover {
    background: #ffd36b;
}

.educators-button-outline {
    color: var(--educators-white);
    border-color: rgba(255, 255, 255, 0.55);
    background: transparent;
}

.educators-button-outline:hover {
    background: rgba(255, 255, 255, 0.08);
}

.educators-button-light-outline {
    color: var(--educators-white);
    border-color: rgba(255, 255, 255, 0.6);
    background: transparent;
}

.educators-button-light-outline:hover {
    background: rgba(255, 255, 255, 0.1);
}

.educators-hero-note {
    margin: 23px 0 0;
    color: #c2cfe0;
    font-size: 0.84rem;
    letter-spacing: 1px;
}


/* HERO VISUAL */

.educators-hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.educators-visual-card {
    width: 100%;
    max-width: 440px;
    padding: 36px;
    color: var(--educators-navy);
    background: var(--educators-white);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.25);
}

.educators-visual-icon {
    display: grid;
    place-items: center;
    width: 67px;
    height: 67px;
    margin-bottom: 25px;
    color: var(--educators-navy);
    background: #fff1c8;
    border: 1px solid #f4d887;
    border-radius: 14px;
    font-family: Georgia, serif;
    font-size: 2.5rem;
    font-weight: 800;
}

.educators-visual-label,
.educators-panel-label {
    margin: 0 0 12px;
    color: #a66b00;
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.educators-visual-card h2 {
    margin: 0;
    font-size: 1.65rem;
    line-height: 1.35;
}

.educators-visual-divider {
    height: 3px;
    width: 60px;
    margin: 25px 0;
    background: var(--educators-gold);
}

.educators-visual-points {
    display: grid;
    gap: 13px;
}

.educators-visual-points span {
    color: #3f5067;
    font-size: 0.91rem;
}


/* GENERAL SECTIONS */

.section-container {
    width: min(1120px, 90%);
    margin: 0 auto;
}

.educators-intro {
    max-width: 880px;
    padding-top: 95px;
    padding-bottom: 95px;
    text-align: center;
}

.educators-intro h2,
.educators-section-heading h2,
.educators-benefits h2 {
    margin: 0 0 22px;
    font-size: clamp(2rem, 3.5vw, 3rem);
    line-height: 1.2;
    letter-spacing: -1px;
}

.educators-intro h2 span,
.educators-benefits h2 span {
    color: #a66b00;
}

.educators-intro > p:not(.educators-eyebrow) {
    color: var(--educators-muted);
    font-size: 1.03rem;
    line-height: 1.9;
}


/* FEATURES */

.educators-features {
    padding: 90px 0 100px;
    background: var(--educators-light);
}

.educators-section-heading {
    max-width: 720px;
    margin: 0 auto 48px;
    text-align: center;
}

.educators-section-heading > p:last-child {
    color: var(--educators-muted);
    font-size: 1.02rem;
}

.educators-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.educators-feature-card {
    padding: 30px;
    background: var(--educators-white);
    border: 1px solid #e6ebf2;
    border-radius: 12px;
    box-shadow: 0 6px 22px rgba(7, 29, 61, 0.035);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.educators-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(7, 29, 61, 0.09);
}

.educators-feature-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 22px;
    color: var(--educators-navy);
    background: #fff0c4;
    border-radius: 10px;
    font-size: 0.94rem;
    font-weight: 900;
}

.educators-feature-card h3 {
    margin: 0 0 12px;
    font-size: 1.15rem;
    line-height: 1.4;
}

.educators-feature-card p {
    margin: 0;
    color: var(--educators-muted);
    font-size: 0.94rem;
    line-height: 1.8;
}


/* BENEFITS */

.educators-benefits {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 70px;
    padding-top: 100px;
    padding-bottom: 100px;
}

.educators-benefits-content > p:not(.educators-eyebrow) {
    color: var(--educators-muted);
    line-height: 1.85;
}

.educators-benefit-list {
    display: grid;
    gap: 25px;
    margin-top: 35px;
}

.educators-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.educators-benefit-check {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 29px;
    height: 29px;
    color: var(--educators-navy);
    background: var(--educators-gold);
    border-radius: 50%;
    font-weight: 900;
}

.educators-benefit-item h3 {
    margin: 0 0 5px;
    font-size: 1.02rem;
}

.educators-benefit-item p {
    margin: 0;
    color: var(--educators-muted);
    font-size: 0.93rem;
    line-height: 1.7;
}

.educators-benefits-panel {
    padding: 42px;
    color: var(--educators-white);
    background: var(--educators-navy);
    border-radius: 16px;
    box-shadow: 0 18px 45px rgba(7, 29, 61, 0.15);
}

.educators-benefits-panel h3 {
    margin: 0;
    font-size: 1.85rem;
    line-height: 1.4;
}

.educators-benefits-panel > p:not(.educators-panel-label) {
    color: #d3ddec;
    font-size: 0.97rem;
    line-height: 1.85;
}

.educators-panel-line {
    width: 60px;
    height: 3px;
    margin: 25px 0;
    background: var(--educators-gold);
}

.educators-panel-motto {
    display: block;
    margin-top: 28px;
    color: var(--educators-gold);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.5px;
}


/* FINAL CALL TO ACTION */

.educators-cta {
    padding: 85px 5%;
    color: var(--educators-white);
    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(245, 184, 46, 0.14),
            transparent 35%
        ),
        var(--educators-navy);
    text-align: center;
}

.educators-cta-content {
    width: min(800px, 100%);
    margin: 0 auto;
}

.educators-cta h2 {
    margin: 0 0 20px;
    font-size: clamp(2rem, 3.7vw, 3.2rem);
    line-height: 1.2;
}

.educators-cta-content > p:not(.educators-eyebrow) {
    max-width: 650px;
    margin: 0 auto;
    color: #d3ddec;
    font-size: 1.02rem;
    line-height: 1.8;
}

.educators-cta .educators-hero-buttons {
    justify-content: center;
}


/* FOOTER */

.educators-footer {
    padding: 40px 5%;
    color: #d5dfed;
    background: #04142c;
    text-align: center;
}

.educators-footer-brand {
    color: var(--educators-white);
    font-size: 1.2rem;
    font-weight: 800;
}

.educators-footer > p {
    margin: 8px 0;
    font-size: 0.88rem;
}

.educators-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin: 24px 0;
}

.educators-footer-links a {
    color: #d5dfed;
    font-size: 0.88rem;
}

.educators-footer-links a:hover {
    color: var(--educators-gold);
}

.educators-footer .educators-copyright {
    margin-top: 25px;
    color: #9eafc6;
    font-size: 0.8rem;
}


/* RESPONSIVE LAYOUT */

@media (max-width: 1000px) {
    .educators-nav {
        padding: 15px 0;
        align-items: flex-start;
    }

    .educators-nav-links {
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 15px;
    }

    .educators-hero {
        gap: 35px;
    }

    .educators-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .educators-benefits {
        gap: 35px;
    }
}

@media (max-width: 700px) {
    .educators-nav {
        width: 90%;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .educators-nav-links {
        justify-content: center;
        gap: 12px 18px;
    }

    .educators-nav-links a {
        font-size: 0.85rem;
    }

    .educators-hero {
        grid-template-columns: 1fr;
        padding: 65px 5%;
    }

    .educators-hero h1 {
        font-size: clamp(2.3rem, 9vw, 3.4rem);
    }

    .educators-visual-card {
        max-width: 520px;
        padding: 28px;
    }

    .educators-intro {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .educators-features {
        padding: 70px 0;
    }

    .educators-feature-grid {
        grid-template-columns: 1fr;
    }

    .educators-benefits {
        grid-template-columns: 1fr;
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .educators-benefits-panel {
        padding: 30px;
    }

    .educators-cta {
        padding: 70px 5%;
    }

    .educators-hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .educators-button {
        width: 100%;
    }

    .educators-footer-links {
        gap: 14px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .educators-page *,
    .educators-page *::before,
    .educators-page *::after {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}


/* Educators page: prevent header and hero overlap */
.educators-page {
    overflow-x: hidden;
}

.educators-header {
    position: relative;
    z-index: 20;
    width: 100%;
}

.educators-nav {
    position: relative;
    z-index: 21;
}

.educators-hero {
    position: relative;
    z-index: 1;
    clear: both;
    margin-top: 0;
    padding-top: 75px;
}

.educators-hero-visual {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.educators-visual-card {
    position: relative;
    z-index: 1;
    margin: 0 auto;
}


/* Educators page: brighter, softer color palette */

.educators-page {
    --educators-navy: #071d3d;
    --educators-gold: #f5b82e;
    --educators-white: #ffffff;
    --educators-muted: #52627a;
    --educators-light: #f7f5ef;

    background: #ffffff;
    color: var(--educators-navy);
}

/* Warm, light background for the introduction */
.educators-intro {
    background: #ffffff;
}

/* Softer feature section */
.educators-features {
    background: #f7f5ef;
}

.educators-feature-card {
    background: #ffffff;
    border-color: #e8e2d5;
    box-shadow: 0 5px 18px rgba(7, 29, 61, 0.05);
}

/* Keep emphasis colors on selected words */
.educators-intro h2 span,
.educators-benefits h2 span {
    color: #b67a00;
}

/* A lighter footer instead of a nearly black one */
.educators-footer {
    color: #52627a;
    background: #f0f3f8;
    border-top: 1px solid #e0e6ef;
}

.educators-footer-brand {
    color: #071d3d;
}

.educators-footer-links a {
    color: #344862;
}

.educators-footer-links a:hover {
    color: #a66b00;
}

.educators-footer .educators-copyright {
    color: #66758a;
}


/* Full-width cream background for the Civics introduction */
.educators-intro {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 95px max(5%, calc((100% - 880px) / 2));
    background: #f7f5ef;
    text-align: center;
}

.educators-intro h2,
.educators-section-heading h2,
.educators-benefits h2 {
    color: #071d3d;
}

.educators-intro h2 span,
.educators-benefits h2 span {
    color: #b67a00;
}

@media (max-width: 700px) {
    .educators-intro {
        padding: 70px 5%;
    }
}


/* White text on navy sections */
.educators-hero,
.educators-cta,
.educators-benefits-panel {
    color: #ffffff;
}

.educators-hero h1,
.educators-hero h2,
.educators-hero p,
.educators-cta h2,
.educators-cta p,
.educators-benefits-panel h3,
.educators-benefits-panel p {
    color: #ffffff;
}

/* Preserve gold emphasis */
.educators-hero h1 span,
.educators-hero .educators-eyebrow,
.educators-cta .educators-eyebrow,
.educators-panel-motto {
    color: #f5b82e;
}

/* Keep the classroom-tools section unchanged */
.educators-features {
    background: #f7f5ef;
}

.educators-feature-card {
    background: #ffffff;
}

.educators-section-heading h2 {
    color: #071d3d;
}

.educators-section-heading p:last-child,
.educators-feature-card p {
    color: #52627a;
}


/* Structural fix for the hero and foundations box */
.educators-page .educators-header {
    position: relative;
    top: auto;
    transform: none;
    float: none;
    width: 100%;
    z-index: 10;
}

.educators-page .educators-nav {
    position: relative;
    top: auto;
    transform: none;
    min-height: 82px;
}

.educators-page .educators-hero {
    position: relative;
    top: auto;
    transform: none;
    margin-top: 0;
    clear: both;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    overflow: hidden;
    padding-top: 75px;
}

.educators-page .educators-hero-content,
.educators-page .educators-hero-visual {
    position: relative;
    top: auto;
    transform: none;
    min-width: 0;
}

.educators-page .educators-visual-card {
    position: relative;
    top: auto;
    transform: none;
    margin: 0 auto;
    width: 100%;
}

@media (max-width: 700px) {
    .educators-page .educators-hero {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* Fix the introduction section overflowing horizontally */
.educators-page .educators-intro {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 85px 24px;
    box-sizing: border-box;
    overflow-wrap: break-word;
}

.educators-page .educators-intro > * {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}

.educators-page .educators-intro .educators-eyebrow {
    margin-bottom: 17px;
}

.educators-page .educators-intro h2 {
    width: 100%;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
}

@media (max-width: 700px) {
    .educators-page .educators-intro {
        padding: 65px 20px;
    }
}


/* White text in the For Educators and Schools section */
.educators-page .educators-benefits-content,
.educators-page .educators-benefits-content h2,
.educators-page .educators-benefits-content > p,
.educators-page .educators-benefit-item h3,
.educators-page .educators-benefit-item p {
    color: #ffffff;
}

/* Keep the highlighted heading words gold */
.educators-page .educators-benefits-content h2 span {
    color: #f5b82e;
}

/* Keep gold checkmarks visible */
.educators-page .educators-benefit-check {
    color: #071d3d;
    background: #f5b82e;
}

/* Give the entire benefits section a navy background */
.educators-page .educators-benefits {
    width: 100%;
    max-width: none;
    padding: 85px max(5%, calc((100% - 1120px) / 2));
    box-sizing: border-box;
    background: #071d3d;
}

@media (max-width: 700px) {
    .educators-page .educators-benefits {
        padding: 65px 5%;
    }
}


/* FINAL EDUCATORS PAGE FIXES */

/* Ensure sizing and colors apply to the whole page */
.educators-page {
    box-sizing: border-box;
    overflow-x: clip;
}

.educators-page *,
.educators-page *::before,
.educators-page *::after {
    box-sizing: border-box;
}

/* Keep the introduction full-width without overflowing */
.educators-page .educators-intro {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 85px 24px;
    background: #f7f5ef;
}

.educators-page .educators-intro > * {
    width: 100%;
    max-width: 880px;
    margin-right: auto;
    margin-left: auto;
}

/* Navy background and white writing for the benefits section */
.educators-page .educators-benefits {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 85px max(5%, calc((100% - 1120px) / 2));
    background: #071d3d;
    color: #ffffff;
}

.educators-page .educators-benefits-content h2,
.educators-page .educators-benefits-content > p:not(.educators-eyebrow),
.educators-page .educators-benefit-item h3,
.educators-page .educators-benefit-item p {
    color: #ffffff;
}

.educators-page .educators-benefits-content h2 span,
.educators-page .educators-benefits-content .educators-eyebrow {
    color: #f5b82e;
}

/* Keep the contrasting classroom-tools section as designed */
.educators-page .educators-features {
    background: #f7f5ef;
}

.educators-page .educators-feature-card {
    background: #ffffff;
}

@media (max-width: 700px) {
    .educators-page .educators-intro {
        padding: 65px 20px;
    }

    .educators-page .educators-benefits {
        grid-template-columns: minmax(0, 1fr);
        padding: 65px 5%;
    }
}


/* =========================================
   ABOUT PAGE
   ========================================= */

.about-page {
    --about-navy: #071d3d;
    --about-navy-light: #102b50;
    --about-gold: #f5b82e;
    --about-cream: #f7f5ef;
    --about-white: #ffffff;
    --about-text: #243247;
    --about-muted: #647084;

    margin: 0;
    background: var(--about-white);
    color: var(--about-text);
    overflow-x: clip;
}

.about-page *,
.about-page *::before,
.about-page *::after {
    box-sizing: border-box;
}

.about-page a {
    text-decoration: none;
}

.about-container {
    width: min(1120px, 90%);
    margin-inline: auto;
}

.about-page .about-eyebrow {
    margin: 0 0 20px;
    color: var(--about-gold);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 2.5px;
    line-height: 1.6;
}

/* HERO */

.about-page .about-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 560px;
    padding: 100px max(5%, calc((100% - 1120px) / 2)) 85px;
    overflow: hidden;
    color: var(--about-white);
    background:
        radial-gradient(ellipse at 85% 15%, rgba(245, 184, 46, 0.16), transparent 38%),
        linear-gradient(120deg, #06152e 0%, #071d3d 55%, #102b50 100%);
}

.about-page .about-hero::before {
    position: absolute;
    z-index: -1;
    top: -150px;
    right: -100px;
    width: 480px;
    height: 480px;
    border: 1px solid rgba(245, 184, 46, 0.2);
    border-radius: 50%;
    content: "";
}

.about-page .about-hero::after {
    position: absolute;
    z-index: -1;
    top: -80px;
    right: -30px;
    width: 340px;
    height: 340px;
    border: 1px solid rgba(245, 184, 46, 0.13);
    border-radius: 50%;
    content: "";
}

.about-page .about-hero-overlay {
    position: absolute;
    z-index: -1;
    right: 10%;
    bottom: 10%;
    width: 200px;
    height: 200px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    transform: rotate(45deg);
}

.about-page .about-hero-content {
    width: min(850px, 100%);
    margin-inline: auto;
}

.about-page .about-hero h1 {
    max-width: 100%;
    margin: 0;
    color: var(--about-white);
    font-size: clamp(2rem, 4.5vw, 4rem);
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.2;
    overflow-wrap: anywhere;
    word-break: normal;
}

.about-page .about-hero h1 span {
    color: var(--about-gold);
}

.about-page .about-hero-description {
    max-width: 610px;
    margin: 25px 0 32px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.1rem;
    line-height: 1.85;
}

.about-page .about-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    min-height: 52px;
    padding: 14px 24px;
    border: 2px solid var(--about-gold);
    border-radius: 6px;
    background: var(--about-gold);
    color: var(--about-navy);
    font-size: 0.95rem;
    font-weight: 800;
    transition: background 0.2s ease, color 0.2s ease,
                transform 0.2s ease;
}

.about-page .about-button:hover {
    background: transparent;
    color: var(--about-gold);
    transform: translateY(-2px);
}

.about-page .about-button:focus-visible,
.about-page .about-secondary-button:focus-visible,
.about-page .about-text-link:focus-visible,
.about-page .about-footer-links a:focus-visible {
    outline: 3px solid var(--about-gold);
    outline-offset: 4px;
}

.about-page .about-button span,
.about-page .about-text-link span {
    font-size: 1.25rem;
}

.about-page .about-hero-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px 34px;
    width: min(1120px, 100%);
    margin: 85px auto 0;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 3px;
}

/* INTRODUCTION */

.about-page .about-intro {
    padding-top: 105px;
    padding-bottom: 105px;
    text-align: center;
}

.about-page .about-intro-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.about-page .about-label-line {
    width: 35px;
    height: 3px;
    background: var(--about-gold);
}

.about-page .about-intro-label .about-eyebrow {
    margin-bottom: 20px;
}

.about-page .about-intro h2 {
    max-width: 850px;
    margin: 0 auto 25px;
    color: var(--about-navy);
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.2;
    letter-spacing: -1px;
}

.about-page .about-intro h2 span {
    display: block;
    color: #a9760c;
}

.about-page .about-intro-text {
    max-width: 780px;
    margin: 0 auto 18px;
    color: var(--about-muted);
    font-size: 1.02rem;
    line-height: 1.95;
}

/* APPROACH */

.about-page .about-approach {
    padding: 100px 0 110px;
    background: var(--about-cream);
}

.about-page .about-section-heading {
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
}

.about-page .about-section-heading h2 {
    margin: 0 0 20px;
    color: var(--about-navy);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
    letter-spacing: -1px;
}

.about-page .about-section-heading h2 span {
    display: block;
    color: #a9760c;
}

.about-page .about-section-heading > p:last-child {
    margin: 0;
    color: var(--about-muted);
    font-size: 1rem;
    line-height: 1.85;
}

.about-page .about-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
}

.about-page .about-feature-card {
    position: relative;
    padding: 35px 28px 38px;
    border: 1px solid #e7e3d8;
    border-radius: 10px;
    background: var(--about-white);
    box-shadow: 0 8px 28px rgba(7, 29, 61, 0.045);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.about-page .about-feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 35px rgba(7, 29, 61, 0.09);
}

.about-page .about-feature-number {
    position: absolute;
    top: 23px;
    right: 25px;
    color: #c4c8cf;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 1px;
}

.about-page .about-feature-icon {
    display: grid;
    place-items: center;
    width: 70px;
    height: 70px;
    margin-bottom: 28px;
    border-radius: 10px;
    background: var(--about-navy);
    color: var(--about-gold);
}

.about-page .about-feature-icon img {
    width: 54px;
    height: 54px;
    object-fit: contain;
    display: block;
}

.about-page .about-feature-card h3 {
    margin: 0 0 14px;
    color: var(--about-navy);
    font-size: 1.25rem;
    line-height: 1.4;
}

.about-page .about-feature-card p {
    margin: 0;
    color: var(--about-muted);
    font-size: 0.95rem;
    line-height: 1.85;
}

/* WHY CIVICS MATTERS */

.about-page .about-civics {
    padding: 110px 0;
    background: var(--about-white);
}

.about-page .about-civics-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 75px;
}

.about-page .about-civics-visual {
    padding: 15px;
    border: 1px solid #e5e1d6;
    border-radius: 12px;
    background: var(--about-cream);
}

.about-page .about-civics-frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 340px;
    padding: 35px 25px;
    border: 1px solid rgba(245, 184, 46, 0.4);
    border-radius: 7px;
    background:
        radial-gradient(circle at 50% 20%, rgba(245, 184, 46, 0.11), transparent 50%),
        var(--about-navy);
    color: var(--about-gold);
    text-align: center;
}

.about-page .about-civics-symbol {
    width: min(240px, 100%);
    margin-bottom: 15px;
}

.about-page .about-civics-symbol svg {
    display: block;
    width: 100%;
    height: auto;
}

.about-page .about-civics-quote {
    max-width: 330px;
    margin: 5px 0 18px;
    color: var(--about-white);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.25rem, 2.5vw, 1.7rem);
    font-style: italic;
    line-height: 1.5;
}

.about-page .about-civics-caption {
    color: var(--about-gold);
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 2px;
    line-height: 1.7;
}

.about-page .about-civics-content h2 {
    margin: 0 0 22px;
    color: var(--about-navy);
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    line-height: 1.2;
    letter-spacing: -0.8px;
}

.about-page .about-civics-content h2 span {
    color: #a9760c;
}

.about-page .about-civics-content > p:not(.about-eyebrow) {
    margin: 0 0 18px;
    color: var(--about-muted);
    font-size: 1rem;
    line-height: 1.9;
}

.about-page .about-text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    color: var(--about-navy);
    font-size: 0.95rem;
    font-weight: 800;
    transition: color 0.2s ease;
}

.about-page .about-text-link:hover {
    color: #a9760c;
}

/* CLOSING CTA */

.about-page .about-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 95px 5%;
    background:
        radial-gradient(ellipse at 80% 0%, rgba(245, 184, 46, 0.13), transparent 40%),
        var(--about-navy);
    color: var(--about-white);
    text-align: center;
}

.about-page .about-cta-decoration {
    position: absolute;
    z-index: -1;
    top: -190px;
    left: -100px;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(245, 184, 46, 0.15);
    border-radius: 50%;
    box-shadow: 0 0 0 35px rgba(245, 184, 46, 0.025),
                0 0 0 70px rgba(245, 184, 46, 0.025);
}

.about-page .about-cta-content {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
}

.about-page .about-cta h2 {
    margin: 0 0 22px;
    color: var(--about-white);
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    letter-spacing: -1.5px;
    line-height: 1.15;
}

.about-page .about-cta h2 span {
    color: var(--about-gold);
}

.about-page .about-cta-content > p:not(.about-eyebrow) {
    max-width: 600px;
    margin: 0 auto 30px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.02rem;
    line-height: 1.85;
}

.about-page .about-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.about-page .about-secondary-button {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    color: var(--about-white);
    font-size: 0.93rem;
    font-weight: 700;
    transition: color 0.2s ease;
}

.about-page .about-secondary-button:hover {
    color: var(--about-gold);
}

/* FOOTER */

.about-page .site-footer {
    padding: 45px 5% 25px;
    background: #041329;
    color: var(--about-white);
}

.about-page .about-footer-inner {
    width: min(1120px, 100%);
    margin: 0 auto;
}

.about-page .about-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: var(--about-white);
}

.about-page .about-footer-brand img {
    display: block;
    width: 52px;
    height: 52px;
    object-fit: contain;
}

.about-page .about-footer-brand h2 {
    margin: 0 0 5px;
    color: var(--about-white);
    font-size: 1.1rem;
}

.about-page .about-footer-brand p {
    margin: 0;
    color: var(--about-gold);
    font-size: 0.78rem;
    letter-spacing: 0.3px;
}

.about-page .about-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 27px;
    margin: 32px 0;
    padding: 25px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.about-page .about-footer-links a {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.88rem;
    transition: color 0.2s ease;
}

.about-page .about-footer-links a:hover {
    color: var(--about-gold);
}

.about-page .about-footer-copyright {
    margin: 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
    line-height: 1.7;
}

/* RESPONSIVE LAYOUT */

@media (max-width: 900px) {
    .about-page .about-hero {
        min-height: 510px;
        padding-top: 85px;
        padding-bottom: 65px;
    }

    .about-page .about-feature-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 620px;
        margin-inline: auto;
    }

    .about-page .about-feature-card {
        padding: 30px;
    }

    .about-page .about-civics-grid {
        grid-template-columns: 1fr;
        gap: 45px;
        max-width: 720px;
    }

    .about-page .about-civics-visual {
        width: 100%;
        max-width: 500px;
        margin-inline: auto;
    }

    .about-page .about-civics-content {
        max-width: 650px;
    }
}

@media (max-width: 600px) {
    .about-page .about-hero {
        min-height: auto;
        padding: 75px 6% 35px;
    }

    .about-page .about-hero h1 {
        font-size: clamp(1.9rem, 8vw, 2.8rem);
        letter-spacing: -0.5px;
        overflow-wrap: anywhere;
    }

    .about-page .about-hero-description {
        font-size: 1rem;
        line-height: 1.75;
    }

    .about-page .about-hero-bottom {
        justify-content: flex-start;
        gap: 12px 20px;
        margin-top: 65px;
        font-size: 0.65rem;
        letter-spacing: 2px;
    }

    .about-page .about-intro {
        padding-top: 75px;
        padding-bottom: 75px;
    }

    .about-page .about-intro h2,
    .about-page .about-section-heading h2,
    .about-page .about-civics-content h2 {
        font-size: 2rem;
        letter-spacing: -0.5px;
    }

    .about-page .about-approach {
        padding: 75px 0;
    }

    .about-page .about-section-heading {
        margin-bottom: 35px;
    }

    .about-page .about-feature-card {
        padding: 28px 24px;
    }

    .about-page .about-civics {
        padding: 75px 0;
    }

    .about-page .about-civics-frame {
        min-height: 300px;
        padding: 25px 15px;
    }

    .about-page .about-cta {
        padding: 75px 6%;
    }

    .about-page .about-cta h2 {
        font-size: 2.5rem;
        letter-spacing: -0.8px;
    }

    .about-page .about-cta-buttons {
        flex-direction: column;
        gap: 15px;
    }

    .about-page .about-secondary-button {
        justify-content: center;
        text-align: center;
    }

    .about-page .about-footer-links {
        gap: 18px 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-page *,
    .about-page *::before,
    .about-page *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}


/* ABOUT PAGE — FORCE HERO HEADING TO FIT */

.about-page .about-hero {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-left: 5%;
    padding-right: 5%;
    overflow-x: clip;
}

.about-page .about-hero-content {
    display: block;
    width: 100%;
    max-width: 850px;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
}

.about-page .about-hero h1 {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word;
    font-size: clamp(1.8rem, 4.2vw, 3.6rem) !important;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.about-page .about-hero h1 span {
    white-space: normal !important;
    overflow-wrap: break-word;
}

@media (max-width: 600px) {
    .about-page .about-hero {
        padding-left: 6%;
        padding-right: 6%;
    }

    .about-page .about-hero h1 {
        font-size: clamp(1.7rem, 7.5vw, 2.5rem) !important;
    }
}


/* =========================================
   OUR MISSION PAGE
   ========================================= */

.mission-page {
    --mission-navy: #071d3d;
    --mission-navy-light: #102b50;
    --mission-gold: #f5b82e;
    --mission-cream: #f7f5ef;
    --mission-white: #ffffff;
    --mission-text: #263449;
    --mission-muted: #667286;

    margin: 0;
    background: var(--mission-white);
    color: var(--mission-text);
    overflow-x: clip;
}

.mission-page *,
.mission-page *::before,
.mission-page *::after {
    box-sizing: border-box;
}

.mission-page a {
    text-decoration: none;
}

.mission-container {
    width: min(1120px, 90%);
    margin-inline: auto;
}

.mission-page .mission-eyebrow {
    margin: 0 0 20px;
    color: var(--mission-gold);
    font-size: 0.77rem;
    font-weight: 800;
    letter-spacing: 2.5px;
    line-height: 1.7;
}

/* HERO */

.mission-page .mission-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 570px;
    padding: 100px 5% 35px;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 85% 20%,
            rgba(245, 184, 46, 0.15), transparent 40%),
        linear-gradient(120deg,
            #041329 0%, #071d3d 55%, #102b50 100%);
    color: var(--mission-white);
}

.mission-page .mission-hero-decoration {
    position: absolute;
    z-index: -1;
    top: -170px;
    right: -80px;
    width: 460px;
    height: 460px;
    border: 1px solid rgba(245, 184, 46, 0.24);
    border-radius: 50%;
    box-shadow:
        0 0 0 40px rgba(245, 184, 46, 0.025),
        0 0 0 80px rgba(245, 184, 46, 0.025);
}

.mission-page .mission-hero-content {
    width: 100%;
    max-width: 880px;
    min-width: 0;
    margin: 0 auto;
}

.mission-page .mission-hero h1 {
    width: 100%;
    max-width: 850px;
    margin: 0;
    color: var(--mission-white);
    font-size: clamp(2.2rem, 5vw, 4.2rem);
    font-weight: 800;
    line-height: 1.13;
    letter-spacing: -1.5px;
    overflow-wrap: break-word;
}

.mission-page .mission-hero h1 span {
    display: block;
    color: var(--mission-gold);
}

.mission-page .mission-hero-description {
    max-width: 660px;
    margin: 25px 0 32px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.08rem;
    line-height: 1.9;
}

.mission-page .mission-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 52px;
    padding: 14px 24px;
    border: 2px solid var(--mission-gold);
    border-radius: 6px;
    background: var(--mission-gold);
    color: var(--mission-navy);
    font-size: 0.94rem;
    font-weight: 800;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.mission-page .mission-button:hover {
    background: transparent;
    color: var(--mission-gold);
    transform: translateY(-2px);
}

.mission-page .mission-button:focus-visible,
.mission-page .mission-secondary-link:focus-visible,
.mission-page .mission-footer-links a:focus-visible {
    outline: 3px solid var(--mission-gold);
    outline-offset: 4px;
}

.mission-page .mission-button span {
    font-size: 1.2rem;
}

.mission-page .mission-hero-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 22px;
    width: min(1120px, 100%);
    margin: 85px auto 0;
    padding: 25px 0 5px;
    border-top: 1px solid rgba(255, 255, 255, 0.17);
    color: rgba(255, 255, 255, 0.73);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 2.5px;
}

.mission-page .mission-footer-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--mission-gold);
}

/* MISSION STATEMENT */

.mission-page .mission-statement {
    position: relative;
    padding-top: 105px;
    padding-bottom: 110px;
    text-align: center;
}

.mission-page .mission-statement-mark {
    height: 65px;
    color: var(--mission-gold);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 6rem;
    line-height: 1;
}

.mission-page .mission-statement .mission-eyebrow {
    margin-top: 10px;
}

.mission-page .mission-statement h2 {
    max-width: 850px;
    margin: 0 auto 25px;
    color: var(--mission-navy);
    font-size: clamp(2rem, 4vw, 3.15rem);
    line-height: 1.2;
    letter-spacing: -1px;
}

.mission-page .mission-statement h2 span {
    display: block;
    color: #a9760c;
}

.mission-page .mission-statement-text {
    max-width: 790px;
    margin: 0 auto;
    color: var(--mission-muted);
    font-size: 1.02rem;
    line-height: 1.95;
}

/* WHY OUR MISSION MATTERS */

.mission-page .mission-why {
    padding: 100px 0;
    background: var(--mission-navy);
    color: var(--mission-white);
}

.mission-page .mission-why-grid {
    display: grid;
    grid-template-columns: 1fr 0.92fr;
    align-items: center;
    gap: 70px;
}

.mission-page .mission-why-content h2 {
    margin: 0 0 25px;
    color: var(--mission-white);
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    line-height: 1.2;
    letter-spacing: -0.8px;
}

.mission-page .mission-why-content h2 span {
    display: block;
    color: var(--mission-gold);
}

.mission-page .mission-why-content > p:not(.mission-eyebrow) {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.98rem;
    line-height: 1.9;
}

.mission-page .mission-why-panel {
    padding: 30px;
    border: 1px solid rgba(245, 184, 46, 0.35);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.045);
}

.mission-page .mission-panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--mission-gold);
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 2px;
}

.mission-page .mission-panel-star {
    font-size: 1.5rem;
}

.mission-page .mission-principle {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 15px;
    padding: 23px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.mission-page .mission-principle-number {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(245, 184, 46, 0.55);
    border-radius: 5px;
    color: var(--mission-gold);
    font-size: 0.82rem;
    font-weight: 800;
}

.mission-page .mission-principle h3 {
    margin: 0 0 8px;
    color: var(--mission-white);
    font-size: 1.08rem;
    line-height: 1.5;
}

.mission-page .mission-principle p {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    line-height: 1.75;
}

.mission-page .mission-panel-bottom {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 23px;
    color: var(--mission-gold);
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 1.4px;
    line-height: 1.8;
}

.mission-page .mission-panel-bottom span {
    flex-shrink: 0;
    width: 25px;
    height: 2px;
    background: var(--mission-gold);
}

/* OUR COMMITMENTS */

.mission-page .mission-commitments {
    padding: 100px 0 110px;
    background: var(--mission-cream);
}

.mission-page .mission-section-heading {
    max-width: 750px;
    margin: 0 auto 55px;
    text-align: center;
}

.mission-page .mission-section-heading h2 {
    margin: 0 0 20px;
    color: var(--mission-navy);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
    letter-spacing: -0.8px;
}

.mission-page .mission-section-heading h2 span {
    color: #a9760c;
}

.mission-page .mission-section-heading > p:last-child {
    margin: 0;
    color: var(--mission-muted);
    font-size: 1rem;
    line-height: 1.85;
}

.mission-page .mission-commitment-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.mission-page .mission-commitment-card {
    min-width: 0;
    padding: 32px 27px 35px;
    border: 1px solid #e6e1d5;
    border-radius: 9px;
    background: var(--mission-white);
    box-shadow: 0 8px 28px rgba(7, 29, 61, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mission-page .mission-commitment-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(7, 29, 61, 0.09);
}

.mission-page .mission-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}

.mission-page .mission-card-number {
    color: #8b94a2;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 2px;
}

.mission-page .mission-card-symbol {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: var(--mission-navy);
    color: var(--mission-gold);
    font-size: 1.6rem;
}

.mission-page .mission-commitment-card h3 {
    margin: 0 0 15px;
    color: var(--mission-navy);
    font-size: 1.2rem;
    line-height: 1.45;
}

.mission-page .mission-commitment-card p {
    margin: 0;
    color: var(--mission-muted);
    font-size: 0.94rem;
    line-height: 1.85;
}

/* WHO WE SERVE */

.mission-page .mission-audience {
    padding: 100px 0;
    background: var(--mission-white);
}

.mission-page .mission-audience-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: start;
    gap: 75px;
}

.mission-page .mission-audience-heading h2 {
    margin: 0;
    color: var(--mission-navy);
    font-size: clamp(2rem, 3.8vw, 3rem);
    line-height: 1.2;
    letter-spacing: -0.8px;
}

.mission-page .mission-audience-heading h2 span {
    display: block;
    margin-top: 8px;
    color: #a9760c;
}

.mission-page .mission-audience-content > p {
    margin: 0 0 20px;
    color: var(--mission-muted);
    font-size: 1rem;
    line-height: 1.9;
}

.mission-page .mission-audience-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 25px;
    margin-top: 30px;
}

.mission-page .mission-secondary-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--mission-navy);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.7;
    transition: color 0.2s ease;
}

.mission-page .mission-secondary-link:hover {
    color: #a9760c;
}

/* FINAL CTA */

.mission-page .mission-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 95px 5%;
    background:
        radial-gradient(ellipse at 80% 0%,
            rgba(245, 184, 46, 0.14), transparent 40%),
        var(--mission-navy);
    color: var(--mission-white);
    text-align: center;
}

.mission-page .mission-cta::before {
    position: absolute;
    z-index: -1;
    top: -180px;
    left: -100px;
    width: 400px;
    height: 400px;
    border: 1px solid rgba(245, 184, 46, 0.15);
    border-radius: 50%;
    box-shadow:
        0 0 0 40px rgba(245, 184, 46, 0.025),
        0 0 0 80px rgba(245, 184, 46, 0.025);
    content: "";
}

.mission-page .mission-cta-inner {
    max-width: 800px;
    margin: 0 auto;
}

.mission-page .mission-cta h2 {
    margin: 0 0 22px;
    color: var(--mission-white);
    font-size: clamp(2.2rem, 4.8vw, 3.7rem);
    line-height: 1.18;
    letter-spacing: -1px;
}

.mission-page .mission-cta h2 span {
    display: block;
    color: var(--mission-gold);
}

.mission-page .mission-cta-inner > p:not(.mission-eyebrow) {
    max-width: 620px;
    margin: 0 auto 30px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    line-height: 1.9;
}

/* FOOTER */

.mission-page .site-footer {
    padding: 45px 5% 25px;
    background: #041329;
    color: var(--mission-white);
}

.mission-page .mission-footer-inner {
    width: min(1120px, 100%);
    margin: 0 auto;
}

.mission-page .mission-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: var(--mission-white);
}

.mission-page .mission-footer-brand img {
    display: block;
    width: 52px;
    height: 52px;
    object-fit: contain;
}

.mission-page .mission-footer-brand h2 {
    margin: 0 0 5px;
    color: var(--mission-white);
    font-size: 1.1rem;
}

.mission-page .mission-footer-brand p {
    margin: 0;
    color: var(--mission-gold);
    font-size: 0.78rem;
    letter-spacing: 0.3px;
}

.mission-page .mission-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 27px;
    margin: 32px 0;
    padding: 25px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.mission-page .mission-footer-links a {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.88rem;
    transition: color 0.2s ease;
}

.mission-page .mission-footer-links a:hover {
    color: var(--mission-gold);
}

.mission-page .mission-footer-copyright {
    margin: 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
    line-height: 1.7;
}

/* RESPONSIVE */

@media (max-width: 900px) {
    .mission-page .mission-hero {
        min-height: 510px;
        padding-top: 85px;
    }

    .mission-page .mission-why-grid,
    .mission-page .mission-audience-grid {
        grid-template-columns: 1fr;
        gap: 45px;
        max-width: 720px;
    }

    .mission-page .mission-commitment-grid {
        grid-template-columns: 1fr;
        max-width: 650px;
        margin-inline: auto;
    }
}

@media (max-width: 600px) {
    .mission-page .mission-hero {
        min-height: auto;
        padding: 75px 6% 30px;
    }

    .mission-page .mission-hero h1 {
        font-size: clamp(1.9rem, 8vw, 2.8rem);
        letter-spacing: -0.5px;
    }

    .mission-page .mission-hero-description {
        font-size: 1rem;
        line-height: 1.8;
    }

    .mission-page .mission-hero-footer {
        justify-content: flex-start;
        gap: 12px;
        margin-top: 60px;
        font-size: 0.61rem;
        letter-spacing: 1.5px;
    }

    .mission-page .mission-statement {
        padding-top: 75px;
        padding-bottom: 80px;
    }

    .mission-page .mission-statement h2,
    .mission-page .mission-why-content h2,
    .mission-page .mission-section-heading h2,
    .mission-page .mission-audience-heading h2 {
        font-size: 2rem;
        letter-spacing: -0.5px;
    }

    .mission-page .mission-why,
    .mission-page .mission-commitments,
    .mission-page .mission-audience {
        padding-top: 75px;
        padding-bottom: 75px;
    }

    .mission-page .mission-why-panel {
        padding: 22px 18px;
    }

    .mission-page .mission-principle {
        grid-template-columns: 35px minmax(0, 1fr);
        gap: 12px;
    }

    .mission-page .mission-principle-number {
        width: 33px;
        height: 33px;
    }

    .mission-page .mission-panel-bottom {
        font-size: 0.58rem;
        letter-spacing: 1px;
    }

    .mission-page .mission-audience-links {
        align-items: flex-start;
        flex-direction: column;
    }

    .mission-page .mission-cta {
        padding: 75px 6%;
    }

    .mission-page .mission-cta h2 {
        font-size: clamp(2rem, 8vw, 2.8rem);
        letter-spacing: -0.5px;
    }

    .mission-page .mission-footer-links {
        gap: 18px 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mission-page *,
    .mission-page *::before,
    .mission-page *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}


/* ================================
   STUDENT ASSIGNMENTS PAGE
================================ */

.assignments-page {
    margin: 0;
    min-height: 100vh;
    background: #f4f6fa;
    color: #071d3d;
    font-family: Arial, Helvetica, sans-serif;
}

.assignments-header {
    min-height: 76px;
    padding: 12px 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: #071d3d;
    color: white;
    box-sizing: border-box;
}

.assignments-logo img {
    display: block;
    width: 155px;
    max-width: 42vw;
    height: auto;
    object-fit: contain;
}

.assignments-user {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
}

.assignments-user #navbarAvatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

.assignments-user #xpCount {
    color: #f5b82e;
    font-weight: 700;
}

.assignments-main {
    width: min(1100px, 90%);
    margin: 0 auto;
    padding: 28px 0 60px;
}

.assignments-back-link {
    display: inline-block;
    margin-bottom: 25px;
    color: #173d70;
    text-decoration: none;
    font-weight: 700;
}

.assignments-back-link:hover {
    text-decoration: underline;
}

.assignments-page-heading {
    margin-bottom: 28px;
}

.assignments-eyebrow {
    color: #946800;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.assignments-page-heading h1 {
    margin: 8px 0;
    font-size: clamp(2rem, 5vw, 2.8rem);
}

.assignments-page-heading > p:last-child {
    color: #586579;
    line-height: 1.6;
    max-width: 680px;
}

.assignments-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 40px;
}

.assignment-summary-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px;
    border: 1px solid #e1e6ef;
    border-radius: 14px;
    background: white;
    box-shadow: 0 4px 14px rgb(7 29 61 / 5%);
}

.assignment-summary-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 12px;
    background: #fff3cd;
    color: #071d3d;
    font-size: 1.5rem;
    font-weight: 800;
}

.assignment-summary-card p {
    margin: 0 0 6px;
    color: #586579;
    font-size: 0.9rem;
}

.assignment-summary-card h2 {
    margin: 0;
    font-size: 1.8rem;
}

.assignments-section {
    margin-top: 34px;
}

.assignments-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.assignments-section-heading h2 {
    margin: 0 0 6px;
    font-size: 1.5rem;
}

.assignments-section-heading p {
    margin: 0;
    color: #647086;
}

.assignment-section-count {
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    box-sizing: border-box;
    border-radius: 20px;
    background: #071d3d;
    color: #f5b82e;
    font-weight: 800;
}

.assignments-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.assignment-page-card {
    min-width: 0;
    padding: 22px;
    border: 1px solid #e1e6ef;
    border-radius: 14px;
    background: white;
    box-shadow: 0 4px 14px rgb(7 29 61 / 4%);
}

.assignment-page-card h3 {
    margin: 0 0 10px;
    overflow-wrap: anywhere;
    font-size: 1.2rem;
}

.assignment-page-card p {
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.assignment-page-class {
    color: #586579;
    font-size: 0.9rem;
}

.assignment-page-due {
    color: #8a5a00;
    font-weight: 700;
    font-size: 0.9rem;
}

.assignment-page-status {
    display: inline-block;
    margin: 8px 0;
    padding: 6px 10px;
    border-radius: 20px;
    background: #fff3cd;
    color: #714d00;
    font-size: 0.8rem;
    font-weight: 800;
}

.assignment-page-status.is-completed {
    background: #e2f5e8;
    color: #176b37;
}

.assignment-page-lessons {
    margin: 14px 0 18px;
    padding-left: 20px;
}

.assignment-page-lessons li {
    margin: 9px 0;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.assignment-page-lessons a {
    color: #173d70;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.assignment-page-button {
    display: inline-block;
    padding: 11px 16px;
    border: 0;
    border-radius: 8px;
    background: #071d3d;
    color: white;
    font: inherit;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.assignment-page-button:hover {
    background: #173d70;
}

.assignment-page-button:focus-visible,
.assignments-back-link:focus-visible,
.assignment-page-lessons a:focus-visible {
    outline: 3px solid #d99b00;
    outline-offset: 3px;
}

.assignment-page-button:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.assignment-page-empty,
.assignments-loading {
    grid-column: 1 / -1;
    padding: 25px;
    border: 1px dashed #cbd3df;
    border-radius: 12px;
    background: white;
    color: #586579;
    line-height: 1.6;
}

.assignments-page-message {
    margin-top: 20px;
    color: #b42318;
}

@media (max-width: 650px) {
    .assignments-header {
        padding: 12px 5%;
        flex-wrap: wrap;
    }

    .assignments-user {
        gap: 8px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .assignments-summary,
    .assignments-grid {
        grid-template-columns: 1fr;
    }

    .assignment-summary-card {
        padding: 18px;
    }

    .assignments-main {
        width: 92%;
    }
}


/* Student profile dropdown */
.profile-menu-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.profile-menu {
    cursor: pointer;
}

.profile-menu .profile-arrow {
    transition: transform 0.2s ease;
}

.profile-menu[aria-expanded="true"] .profile-arrow {
    transform: rotate(180deg);
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1000;
    width: 190px;
    padding: 8px;
    background: #071d3d;
    border: 1px solid rgba(245, 184, 46, 0.45);
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

.profile-dropdown[hidden] {
    display: none;
}

.profile-dropdown-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    color: #ffffff;
    text-decoration: none;
    font-size: 0.95rem;
    border-radius: 7px;
    transition: background 0.2s ease, color 0.2s ease;
}

.profile-dropdown-link:hover,
.profile-dropdown-link:focus-visible {
    background: rgba(245, 184, 46, 0.15);
    color: #f5b82e;
    outline: none;
}

.dropdown-link-icon {
    width: 20px;
    text-align: center;
    color: #f5b82e;
    font-size: 1.15rem;
}


/* Fix profile dropdown link appearance */
.profile-dropdown .profile-dropdown-link,
.profile-dropdown .profile-dropdown-link:visited {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 400;
    text-decoration: none;
}

.profile-dropdown .profile-dropdown-link span {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

.profile-dropdown .profile-dropdown-link:hover,
.profile-dropdown .profile-dropdown-link:focus-visible {
    color: #f5b82e;
    background: rgba(245, 184, 46, 0.15);
}

.profile-dropdown .profile-dropdown-link:hover span,
.profile-dropdown .profile-dropdown-link:focus-visible span {
    color: inherit;
    font-size: inherit;
}


/* Keep dropdown icons and labels on the same line */
.profile-dropdown .profile-dropdown-link {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    white-space: nowrap !important;
    width: 100%;
    box-sizing: border-box;
}

.profile-dropdown .profile-dropdown-link .dropdown-link-icon {
    display: inline-block !important;
    flex: 0 0 20px !important;
    width: 20px !important;
    min-width: 20px !important;
    margin: 0 !important;
}

.profile-dropdown .profile-dropdown-link > span:not(.dropdown-link-icon) {
    display: inline-block !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    text-align: left !important;
}



/* Consistent alignment for profile dropdown items */
.profile-dropdown .profile-dropdown-link {
    display: grid !important;
    grid-template-columns: 20px 1fr !important;
    align-items: center !important;
    justify-items: start !important;
    column-gap: 12px !important;
    width: 100%;
    box-sizing: border-box;
    padding: 12px !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
}

.profile-dropdown .profile-dropdown-link .dropdown-link-icon {
    display: block !important;
    width: 20px !important;
    min-width: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    line-height: 1.4 !important;
}

.profile-dropdown .profile-dropdown-link > span:not(.dropdown-link-icon) {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.95rem !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    text-align: left !important;
    color: inherit;
}


/* ================================
   STUDENT SETTINGS PAGE
================================ */

.settings-main {
    flex: 1;
    min-width: 0;
    padding: 36px;
    max-width: 1050px;
    margin: 0 auto;
    box-sizing: border-box;
}

.settings-page-heading {
    margin-bottom: 28px;
}

.settings-page-heading .eyebrow {
    color: #b88716;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.settings-page-heading h1 {
    color: #071d3d;
    font-size: 2.2rem;
    margin: 0 0 10px;
}

.settings-page-heading > p:last-child {
    color: #64748b;
    line-height: 1.6;
    margin-top: 0;
}

.settings-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 26px;
    margin-bottom: 22px;
    box-shadow: 0 4px 14px rgba(7, 29, 61, 0.05);
}

.settings-card-heading {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 22px;
}

.settings-card-icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #071d3d;
    color: #f5b82e;
    font-size: 1.45rem;
}

.settings-card-heading h2 {
    color: #071d3d;
    font-size: 1.2rem;
    margin: 0 0 6px;
}

.settings-card-heading p {
    color: #64748b;
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0;
}

.settings-detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 16px 0;
    border-top: 1px solid #e2e8f0;
}

.settings-detail > span {
    color: #64748b;
    font-size: 0.95rem;
}

.settings-detail strong {
    color: #071d3d;
    font-size: 0.95rem;
    font-weight: 600;
    overflow-wrap: anywhere;
    text-align: right;
}

.settings-action-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    color: #071d3d;
    font-weight: 700;
    text-decoration: none;
}

.settings-action-link:hover {
    color: #b88716;
}

.settings-description {
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 20px;
}

.settings-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 12px 20px;
    border: 0;
    border-radius: 8px;
    background: #071d3d;
    color: #ffffff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.settings-button:hover {
    background: #123663;
}

.settings-button:focus-visible {
    outline: 3px solid #f5b82e;
    outline-offset: 3px;
}

.settings-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.settings-signout-button {
    background: #8b2635;
}

.settings-signout-button:hover {
    background: #6f1d2a;
}

.settings-message {
    margin: 14px 0 0;
    font-size: 0.92rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.settings-message:empty {
    display: none;
}

.settings-message[data-status="success"] {
    color: #166534;
}

.settings-message[data-status="error"] {
    color: #b91c1c;
}

.settings-back-link {
    display: inline-block;
    margin: 4px 0 30px;
    color: #071d3d;
    font-weight: 600;
    text-decoration: none;
}

.settings-back-link:hover {
    color: #b88716;
}

@media (max-width: 900px) {
    .settings-main {
        padding: 28px 22px;
    }
}

@media (max-width: 600px) {
    .settings-main {
        padding: 24px 16px;
    }

    .settings-page-heading h1 {
        font-size: 1.8rem;
    }

    .settings-card {
        padding: 20px 16px;
        border-radius: 12px;
    }

    .settings-card-heading {
        align-items: flex-start;
        gap: 12px;
    }

    .settings-card-icon {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }

    .settings-detail {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .settings-detail strong {
        text-align: left;
    }

    .settings-button {
        width: 100%;
    }
}


/* Sign Out button in the profile dropdown */
.profile-dropdown .profile-dropdown-signout {
    display: grid !important;
    grid-template-columns: 20px 1fr !important;
    align-items: center !important;
    justify-items: start !important;
    column-gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box;
    padding: 12px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 7px;
    background: transparent;
    color: #ffffff;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.profile-dropdown .profile-dropdown-signout .dropdown-link-icon {
    display: block !important;
    width: 20px !important;
    margin: 0 !important;
    color: #f5b82e;
    text-align: center;
}

.profile-dropdown .profile-dropdown-signout:hover,
.profile-dropdown .profile-dropdown-signout:focus-visible {
    background: rgba(245, 184, 46, 0.15);
    color: #f5b82e;
    outline: none;
}

.profile-dropdown .profile-dropdown-signout:focus-visible {
    outline: 2px solid #f5b82e;
    outline-offset: -2px;
}


/* Student signup terms agreement */
.signup-terms {
    width: 100%;
    margin: 8px 0 18px;
    color: #071d3d;
}

.signup-terms-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9rem;
    line-height: 1.6;
    cursor: pointer;
}

.signup-terms-label input[type="checkbox"] {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-top: 4px;
    accent-color: #071d3d;
    cursor: pointer;
}

.signup-terms-label a {
    color: #8a6410;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.signup-terms-label a:hover {
    color: #071d3d;
}

.signup-terms-note {
    margin: 6px 0 0 27px;
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.5;
}

#signupMessage {
    margin: 0 0 14px;
    font-size: 0.9rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

#signupMessage:empty {
    display: none;
}

#signupMessage[data-status="error"] {
    color: #b91c1c;
}

#signupMessage[data-status="success"] {
    color: #166534;
}

.signup-create-button:disabled {
    opacity: 0.7;
    cursor: wait;
}


/* Fix terms agreement text visibility */
.page-student-signup .signup-terms-label,
.page-student-signup .signup-terms-label span {
    color: #ffffff !important;
}

.page-student-signup .signup-terms-label a,
.page-student-signup .signup-terms-label a:visited {
    color: #f5b82e !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.page-student-signup .signup-terms-note {
    color: #e2e8f0 !important;
}

/* Move the administrator signup form lower on the page */
body.page-student-signup .administrator-signup-background-img-goes-here {
    padding-top: 100px;
}

body.page-student-signup .administrator-title-signup {
    margin-top: 20px;
}


.progress-fill {
    height: 100%;
    width: 0%;
    background-color: #f5b82e;
    border-radius: inherit;
    transition: width 0.3s ease;
}

.progress-track {
    width: 100%;
    height: 10px;
    overflow: hidden;
    background-color: #e5e7eb;
    border-radius: 999px;
}

.settings-page-heading {
    color: #ffffff;
}


.assignment-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0 16px;
}

.assignment-card-actions button {
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.assignment-edit-button {
    background-color: #f5b82e;
    color: #071d3d;
}

.assignment-edit-button:hover {
    background-color: #ffd166;
}

.assignment-delete-button {
    background-color: #fff0f0;
    color: #a51d2d;
    border-color: #e7b7bc !important;
}

.assignment-delete-button:hover {
    background-color: #ffe0e0;
}

.assignment-card-actions button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}


/* =========================================
   TEACHER NAVBAR PROFILE DROPDOWN
========================================= */

.teacher-navbar-info {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    margin-left: auto;
}

.teacher-profile-menu-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* Profile button */

.teacher-profile-menu-wrapper .profile-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: 30px;
    background: transparent;
    color: white;
    font: inherit;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.teacher-profile-menu-wrapper .profile-menu:hover,
.teacher-profile-menu-wrapper .profile-menu[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(245, 184, 46, 0.45);
}

.teacher-profile-menu-wrapper .profile-menu img {
    display: block;
    width: 45px;
    height: 45px;
    border: 2px solid #f5b82e;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.teacher-profile-menu-wrapper #navbarUsername {
    color: white;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.teacher-profile-menu-wrapper .profile-arrow {
    width: 8px;
    height: 8px;
    margin: -4px 3px 0;
    border-right: 2px solid #f5b82e;
    border-bottom: 2px solid #f5b82e;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.teacher-profile-menu-wrapper .profile-menu[aria-expanded="true"] .profile-arrow {
    transform: rotate(225deg);
}

/* Dropdown panel */

.teacher-profile-menu-wrapper .teacher-profile-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 220px;
    padding: 8px;
    box-sizing: border-box;
    background: #06182f;
    border: 1.5px solid #f5b82e;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
    z-index: 2001;
}

.teacher-profile-menu-wrapper .teacher-profile-dropdown[hidden] {
    display: none !important;
}

/* Dropdown options */

.teacher-profile-menu-wrapper .profile-dropdown-link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    box-sizing: border-box;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.teacher-profile-menu-wrapper .profile-dropdown-link:hover {
    background: rgba(245, 184, 46, 0.13);
    color: #f5b82e;
}

.teacher-profile-menu-wrapper .dropdown-link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.teacher-profile-menu-wrapper .dropdown-link-icon img {
    width: 19px;
    height: 19px;
    object-fit: contain;
}

/* Sign out */

.teacher-profile-menu-wrapper .profile-dropdown-signout {
    margin-top: 5px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0 0 7px 7px;
}

.teacher-profile-menu-wrapper .profile-dropdown-signout:hover {
    background: rgba(220, 70, 70, 0.13);
    color: #ff9292;
}

.teacher-profile-menu-wrapper .profile-dropdown-signout:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* Keyboard accessibility */

.teacher-profile-menu-wrapper .profile-menu:focus-visible,
.teacher-profile-menu-wrapper .profile-dropdown-link:focus-visible {
    outline: 2px solid #f5b82e;
    outline-offset: 3px;
}

/* Mobile */

@media (max-width: 600px) {
    .teacher-profile-menu-wrapper .profile-menu {
        gap: 7px;
        padding: 5px;
    }

    .teacher-profile-menu-wrapper .profile-menu img {
        width: 36px;
        height: 36px;
    }

    .teacher-profile-menu-wrapper #navbarUsername {
        font-size: 12px;
    }

    .teacher-profile-menu-wrapper .teacher-profile-dropdown {
        width: 195px;
    }
}

/* =========================================
   ADMINISTRATOR NAVBAR PROFILE DROPDOWN
========================================= */

.profile-dropdown-container {
    position: relative;
    display: inline-block;
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 190px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
    padding: 8px;
    z-index: 1000;
}

.profile-dropdown[hidden] {
    display: none;
}

.profile-dropdown a,
.profile-dropdown button {
    display: block;
    width: 100%;
    padding: 11px 13px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: #071d3d;
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}

.profile-dropdown a:hover,
.profile-dropdown button:hover {
    background: #f1f4f8;
}

.profile-dropdown button {
    color: #b42318;
}

.teacher-remove-student-button {
    background-color: #b42318;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 9px 14px;
    font-weight: 600;
    cursor: pointer;
    margin-left: auto;
}

.teacher-remove-student-button:hover {
    background-color: #8f1d14;
}

.teacher-remove-student-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* STUDENT PROFILE DROPDOWN FIX */

#profileDropdown {
    background: #06182f;
    border: 1.5px solid #f5b82e;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
    padding: 8px;
}

#profileDropdown .profile-dropdown-link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    box-sizing: border-box;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

#profileDropdown .profile-dropdown-link:hover {
    background: rgba(245, 184, 46, 0.13);
    color: #f5b82e;
}

#profileDropdown .profile-dropdown-signout:hover {
    background: rgba(220, 70, 70, 0.13);
    color: #ff9292;
}

#profileDropdown .dropdown-link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}


/* =====================================================
   CIVITAS LEARNING - RESPONSIVE WEBSITE OVERHAUL
   ===================================================== */

/* ---------- TABLET AND SMALLER LAPTOPS ---------- */

@media (max-width: 900px) {

    /* Navigation */

    body {
        padding-top: 0;
    }

    .navbar {
        position: sticky;
        top: 0;
        height: auto;
        min-height: 0;
        width: 100%;
        padding: 12px 20px;
        gap: 12px;
        flex-wrap: wrap;
    }

    .navbar .nav-links {
        order: 3;
        flex: 1 0 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        white-space: normal;
        gap: 10px 18px;
    }

    .navbar nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 14px;
    }

    .logo {
        gap: 9px;
    }

    .logo-img {
        width: 45px;
    }

    .logo-text h2 {
        font-size: 23px;
    }

    .logo-text p {
        font-size: 10px;
    }

    /* Dashboards */

    .dashboard-layout {
        grid-template-columns: 190px minmax(0, 1fr);
        gap: 16px;
        padding: 16px;
    }

    .dashboard-sidebar,
    .dashboard-content,
    .dashboard-right {
        min-width: 0;
    }

    .dashboard-right {
        grid-column: 1 / -1;
    }

    .dashboard-content {
        padding: 16px;
    }

    /* Statistics */

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Homepage features */

    .features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: -80px;
        padding: 0 4%;
    }

    .feature-box {
        padding: 16px;
        gap: 12px;
    }

    .feature-text h2 {
        margin-right: 0;
        text-align: left;
        font-size: 22px;
    }

    /* General sizing */

    img,
    video {
        max-width: 100%;
    }

    input,
    select,
    textarea,
    button {
        max-width: 100%;
        box-sizing: border-box;
    }
}


/* ---------- MOBILE PHONES ---------- */

@media (max-width: 600px) {

    /* General */

    body {
        padding-top: 0;
        overflow-x: hidden;
    }

    h1 {
        font-size: clamp(1.8rem, 7vw, 2.8rem);
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Navigation */

    .navbar {
        padding: 10px 12px;
        gap: 10px;
    }

    .logo {
        gap: 7px;
    }

    .logo-img {
        width: 38px;
    }

    .logo-text h2 {
        font-size: 18px;
    }

    .logo-text p {
        font-size: 8px;
        letter-spacing: 0.5px;
    }

    .navbar .nav-links {
        gap: 9px 13px;
    }

    .navbar nav a {
        font-size: 13px;
    }

    .student-navbar-info,
    .teacher-navbar-info {
        gap: 7px;
        min-width: 0;
    }

    .xp-display {
        font-size: 13px;
        gap: 4px;
    }

    .profile-menu {
        gap: 5px;
        padding: 4px;
    }

    .profile-menu img {
        width: 34px;
        height: 34px;
    }

    .profile-menu #navbarUsername {
        font-size: 11px;
        max-width: 75px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Dashboards */

    .dashboard-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        padding: 12px;
    }

    .dashboard-sidebar,
    .dashboard-content,
    .dashboard-right {
        grid-column: 1;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .dashboard-content {
        padding: 13px;
    }

    .sidebar-nav-box {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        padding: 10px;
    }

    .sidebar-link {
        padding: 10px 8px;
        font-size: 13px;
        gap: 7px;
    }

    .sidebar-quote-box {
        padding: 14px;
    }

    .welcome-banner {
        min-height: 190px;
        padding: 18px;
    }

    .welcome-banner h1 {
        font-size: 27px;
        white-space: normal;
    }

    .welcome-banner blockquote {
        font-size: 14px;
    }

    /* Statistics */

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .stat-card {
        padding: 12px 6px;
    }

    .stat-card h3 {
        font-size: 13px;
    }

    .stat-card p {
        font-size: 16px;
    }

    /* Homepage */

    .background-img-goes-here {
        aspect-ratio: auto;
        min-height: 470px;
        padding: 35px 16px;
        box-sizing: border-box;
    }

    .background-img-goes-here .title {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
    }

    .background-img-goes-here .title h1 {
        font-size: clamp(2.2rem, 9vw, 3.2rem);
        line-height: 1.1;
        white-space: normal;
    }

    .main-description {
        font-size: 15px;
        line-height: 1.5;
        margin-top: 15px;
    }

    .info-buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .signup-button-2,
    .learn-more-button {
        font-size: 15px;
        padding: 13px 20px;
    }

    .features {
        grid-template-columns: minmax(0, 1fr);
        margin-top: -35px;
        padding: 0 16px;
        gap: 12px;
    }

    .feature-box {
        min-height: 0;
        padding: 16px;
    }

    .feature-icon {
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
    }

    .feature-icon img {
        width: 28px;
        height: 28px;
    }

    .feature-text h2 {
        font-size: 20px;
    }

    .feature-text p {
        font-size: 13px;
    }

    /* Forms */

    .signup-form-box,
    .login-form {
        width: 100%;
        max-width: 100%;
        padding: 20px 16px;
        margin: 15px auto;
        box-sizing: border-box;
    }

    .signup-field input,
    .login-field input {
        width: 100%;
        box-sizing: border-box;
    }

    /* Assignments and headings */

    .assignments-heading {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .assignments-panel {
        padding: 13px;
    }

    /* Tables */

    table {
        max-width: 100%;
    }
}


/* ---------- VERY SMALL PHONES ---------- */

@media (max-width: 400px) {

    .navbar {
        padding: 9px;
    }

    .logo-img {
        width: 32px;
    }

    .logo-text h2 {
        font-size: 16px;
    }

    .logo-text p {
        font-size: 7px;
    }

    .navbar .nav-links {
        gap: 8px 10px;
    }

    .navbar nav a {
        font-size: 12px;
    }

    .dashboard-layout {
        padding: 8px;
    }

    .sidebar-link {
        font-size: 12px;
        padding: 9px 5px;
    }

    .stats-grid {
        gap: 6px;
    }

    .feature-box {
        padding: 12px;
    }
}


/* ---------- SIGNUP AND LOGIN PAGE SCROLLING ---------- */

@media (max-width: 600px) {

    body.page-signup,
    body.page-student-signup {
        height: auto;
        min-height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
    }
}


/* =========================================================
   CIVITAS LEARNING
   RESPONSIVE FIXES: HOMEPAGE + ACCOUNT PAGES
   ========================================================= */


/* =========================================================
   SHARED NAVIGATION AND PAGE SETUP
   ========================================================= */

@media (max-width: 900px) {

    body:has(.top-section),
    body.page-signup,
    body.page-student-signup {
        padding-top: 0;
    }

    body.page-signup,
    body.page-student-signup {
        height: auto;
        min-height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
    }

    body:has(.top-section) .navbar,
    body.page-signup .navbar,
    body.page-student-signup .navbar {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        min-height: 75px;
        padding: 12px 20px;
        gap: 12px;
        flex-wrap: wrap;
        box-sizing: border-box;
    }

    body:has(.top-section) .nav-links,
    body.page-signup .nav-links,
    body.page-student-signup .nav-links {
        flex: 1 0 100%;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        white-space: normal;
        gap: 12px 18px;
    }

    body:has(.top-section) nav,
    body.page-signup nav,
    body.page-student-signup nav {
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px 18px;
    }

    body:has(.top-section) .logo,
    body.page-signup .logo,
    body.page-student-signup .logo {
        gap: 10px;
    }

    body:has(.top-section) .logo-img,
    body.page-signup .logo-img,
    body.page-student-signup .logo-img {
        width: 45px;
    }

    body:has(.top-section) .logo-text h2,
    body.page-signup .logo-text h2,
    body.page-student-signup .logo-text h2 {
        font-size: 25px;
    }

    body:has(.top-section) .logo-text p,
    body.page-signup .logo-text p,
    body.page-student-signup .logo-text p {
        font-size: 10px;
    }

}


/* =========================================================
   HOMEPAGE: INDEX.HTML
   ========================================================= */

@media (max-width: 900px) {

    .top-section {
        width: 100%;
        aspect-ratio: auto;
        min-height: 430px;
        padding: 45px 20px;
        box-sizing: border-box;
    }

    .top-section .title {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
        max-width: 850px;
        margin: 0 auto;
    }

    .top-section h1 {
        font-size: clamp(42px, 7vw, 68px);
        line-height: 1.1;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .top-section .title-decoration {
        gap: 10px;
        width: 100%;
    }

    .top-section .title-decoration span:not(.star) {
        width: min(180px, 25vw);
    }

    .main-description {
        max-width: 650px;
        font-size: 18px;
        line-height: 1.55;
        margin: 18px auto;
    }

    .features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        padding: 0 4%;
        margin-top: -55px;
    }

    .feature-box {
        min-width: 0;
        padding: 16px;
        gap: 12px;
    }

    .feature-icon {
        flex: 0 0 55px;
        width: 55px;
        min-width: 55px;
        height: 55px;
    }

    .feature-text {
        min-width: 0;
    }

    .feature-text h2 {
        margin: 0 0 6px;
        font-size: 22px;
        text-align: left;
    }

    .feature-text p {
        font-size: 14px;
        text-align: left;
    }

    .bottom-section > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 26px;
        padding: 35px 20px 50px;
        box-sizing: border-box;
        background-color: #071d3d;
    }

    /* Replace the complex desktop background composition
       with a clean, readable stacked layout. */

    .background-image-2-goes-here,
    .star-layer {
        display: none;
    }

    .washington-section,
    .battle-section,
    .founding-documents-section,
    .text-section,
    .signup-section {
        position: relative;
        inset: auto;
        left: auto;
        top: auto;
        bottom: auto;
        transform: none;
        width: 100%;
        max-width: 760px;
        margin: 0 auto;
        box-sizing: border-box;
        text-align: center;
    }

    /* Arrange the illustrations and descriptions together. */

    .text-1 {
        order: 1;
    }

    .washington-section {
        order: 2;
    }

    .text-2 {
        order: 3;
    }

    .battle-section {
        order: 4;
    }

    .text-3 {
        order: 5;
    }

    .founding-documents-section {
        order: 6;
    }

    .text-4 {
        order: 7;
    }

    .signup-section {
        order: 8;
    }

    .washington-section-image,
    .battle-section-image,
    .founding-documents-section-image {
        display: block;
        width: 100%;
        max-width: 440px;
        height: auto;
        margin: 0 auto;
    }

    .text-section h2 {
        font-size: clamp(30px, 5vw, 48px);
        line-height: 1.15;
        margin: 0 0 12px;
    }

    .text-section p {
        font-size: 17px;
        line-height: 1.6;
        margin: 0;
    }

    .signup-section {
        padding: 20px 0 0;
    }

    .signup-section h2 {
        font-size: clamp(27px, 5vw, 38px);
        line-height: 1.2;
    }

    .signup-section p {
        font-size: 17px;
    }

    .footer-content {
        flex-wrap: wrap;
        gap: 35px;
    }

    .footer-brand {
        flex: 1 0 100%;
    }

    .footer-column {
        flex: 1 1 150px;
    }

    .footer-bottom {
        flex-wrap: wrap;
        gap: 15px;
    }

}


/* =========================================================
   SIGNUP PAGE: SIGNUP.HTML
   ========================================================= */

@media (max-width: 900px) {

    .signup-background-img-goes-here {
        aspect-ratio: auto;
        min-height: 300px;
        padding: 35px 20px;
        box-sizing: border-box;
    }

    .signup-background-img-goes-here .title-signup {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
        margin: 0 auto;
    }

    .signup-background-img-goes-here .sign-up-title {
        font-size: clamp(42px, 7vw, 68px);
        white-space: normal;
        margin-top: 0;
    }

    .signup-content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        max-width: 850px;
        margin: -35px auto 45px;
        padding: 0 20px;
        box-sizing: border-box;
        gap: 18px;
    }

    .signup-card {
        min-width: 0;
        min-height: 340px;
        padding: 24px 18px;
        box-sizing: border-box;
    }

    .signup-card-text h2 {
        font-size: 25px;
    }

    .signup-card p {
        font-size: 16px;
    }

}


/* =========================================================
   LOGIN PAGE: LOGIN.HTML
   ========================================================= */

@media (max-width: 900px) {

    .login-background-img-goes-here {
        aspect-ratio: auto;
        min-height: 0;
        padding: 35px 20px 50px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 18px;
        box-sizing: border-box;
    }

    .login-background-img-goes-here .title-signup {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
        margin: 0 auto;
    }

    .login-title {
        margin-top: 0;
    }

    .login-background-img-goes-here .sign-up-title {
        font-size: clamp(42px, 7vw, 68px);
        white-space: normal;
        margin-top: 0;
    }

    .login-background-img-goes-here .sign-up-paragraph {
        font-size: clamp(16px, 2.5vw, 24px);
        line-height: 1.5;
        margin: 12px auto;
    }

    .login-form {
        width: 100%;
        max-width: 700px;
        margin: 0 auto;
        padding: 25px clamp(18px, 5vw, 50px) 30px;
        box-sizing: border-box;
    }

    .login-options {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }

}


/* =========================================================
   STUDENT, TEACHER AND ADMINISTRATOR SIGNUP PAGES
   ========================================================= */

@media (max-width: 900px) {

    .student-signup-background-img-goes-here,
    .teacher-signup-background-img-goes-here,
    .administrator-signup-background-img-goes-here {
        width: 100%;
        aspect-ratio: auto;
        min-height: 0;
        padding: 35px 20px 50px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 18px;
        box-sizing: border-box;
    }

    .title-signup.student-title-signup,
    .title-signup.teacher-title-signup,
    .title-signup.administrator-title-signup {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
        max-width: 850px;
        margin: 0 auto;
    }

    .student-title-signup,
    .teacher-title-signup,
    .administrator-title-signup {
        margin-top: 0;
    }

    .student-signup-background-img-goes-here .sign-up-title,
    .teacher-signup-background-img-goes-here .sign-up-title,
    .administrator-signup-background-img-goes-here .sign-up-title {
        font-size: clamp(32px, 6vw, 58px);
        line-height: 1.15;
        white-space: normal;
        margin: 0;
    }

    .student-sign-up-paragraph,
    .teacher-sign-up-paragraph,
    .administrator-sign-up-paragraph {
        font-size: clamp(16px, 2.5vw, 23px);
        line-height: 1.5;
        margin: 12px auto 0;
    }

    .student-information,
    .teacher-information,
    .administrator-information {
        width: 100%;
        max-width: 740px;
        margin: 0 auto;
        padding: 0;
        box-sizing: border-box;
    }

    .signup-form-box {
        width: 100%;
        max-width: 700px;
        margin: 0 auto;
        padding: 25px clamp(18px, 5vw, 50px) 30px;
        box-sizing: border-box;
    }

    .signup-field {
        width: 100%;
        box-sizing: border-box;
    }

    .signup-field input,
    .signup-field select {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .signup-create-button {
        width: 100%;
    }

    /* Override the administrator form's desktop spacing. */

    body.page-student-signup .administrator-signup-background-img-goes-here {
        padding-top: 35px;
    }

    body.page-student-signup .administrator-title-signup {
        margin-top: 0;
    }

}


/* =========================================================
   MOBILE PHONES
   ========================================================= */

@media (max-width: 600px) {

    /* Shared navigation */

    body:has(.top-section) .navbar,
    body.page-signup .navbar,
    body.page-student-signup .navbar {
        padding: 10px 12px;
        gap: 10px;
    }

    body:has(.top-section) .logo-img,
    body.page-signup .logo-img,
    body.page-student-signup .logo-img {
        width: 36px;
    }

    body:has(.top-section) .logo-text h2,
    body.page-signup .logo-text h2,
    body.page-student-signup .logo-text h2 {
        font-size: 19px;
    }

    body:has(.top-section) .logo-text p,
    body.page-signup .logo-text p,
    body.page-student-signup .logo-text p {
        font-size: 8px;
        letter-spacing: 0.5px;
    }

    body:has(.top-section) .nav-links,
    body.page-signup .nav-links,
    body.page-student-signup .nav-links {
        gap: 9px 13px;
    }

    body:has(.top-section) nav a,
    body.page-signup nav a,
    body.page-student-signup nav a {
        font-size: 12px;
    }

    body:has(.top-section) .button,
    body.page-signup .button,
    body.page-student-signup .button {
        padding: 8px 12px;
        font-size: 12px;
    }


    /* Homepage */

    .top-section {
        min-height: 420px;
        padding: 35px 16px;
    }

    .top-section h1 {
        font-size: clamp(36px, 10vw, 48px);
        letter-spacing: 0;
    }

    .main-description {
        font-size: 15px;
        line-height: 1.55;
    }

    .info-buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .signup-button-2,
    .learn-more-button {
        padding: 13px 19px;
        margin: 4px;
        font-size: 15px;
    }

    .features {
        grid-template-columns: minmax(0, 1fr);
        padding: 0 16px;
        margin-top: -25px;
        gap: 12px;
    }

    .feature-box {
        min-height: 0;
        padding: 15px;
        gap: 12px;
    }

    .feature-icon {
        flex-basis: 48px;
        width: 48px;
        min-width: 48px;
        height: 48px;
    }

    .feature-box img {
        width: 28px;
        height: 28px;
    }

    .feature-text h2 {
        font-size: 20px;
    }

    .feature-text p {
        font-size: 13px;
    }

    .bottom-section > div {
        padding: 30px 17px 40px;
        gap: 23px;
    }

    .text-section h2 {
        font-size: 29px;
    }

    .text-section p {
        font-size: 15px;
    }

    .signup-section h2 {
        font-size: 27px;
    }

    .signup-section p {
        font-size: 15px;
    }

    .final-signup-button {
        font-size: 17px;
        padding: 14px 20px;
    }


    /* Signup account selection */

    .signup-background-img-goes-here {
        min-height: 260px;
        padding: 30px 15px;
    }

    .signup-background-img-goes-here .sign-up-title {
        font-size: 42px;
    }

    .signup-content {
        grid-template-columns: minmax(0, 1fr);
        max-width: 460px;
        margin: -15px auto 35px;
        padding: 0 16px;
        gap: 16px;
    }

    .signup-card {
        min-height: 0;
        padding: 22px 18px;
    }

    .signup-card-icon {
        width: 80px;
        height: 80px;
    }

    .signup-card-icon img {
        width: 70px;
        height: 70px;
    }

    .signup-card-text h2 {
        font-size: 24px;
    }

    .signup-card p {
        font-size: 15px;
    }

    .select-button {
        min-height: 50px;
        font-size: 19px;
    }


    /* Login */

    .login-background-img-goes-here {
        padding: 30px 15px 40px;
    }

    .login-background-img-goes-here .sign-up-title {
        font-size: 43px;
    }

    .login-form {
        padding: 22px 17px 25px;
    }

    .login-field {
        margin-bottom: 20px;
    }

    .login-options {
        align-items: flex-start;
        flex-direction: column;
    }

    .login-button {
        height: 54px;
        font-size: 19px;
    }


    /* Student, teacher and administrator registration */

    .student-signup-background-img-goes-here,
    .teacher-signup-background-img-goes-here,
    .administrator-signup-background-img-goes-here {
        padding: 30px 15px 40px;
        gap: 16px;
    }

    .student-signup-background-img-goes-here .sign-up-title,
    .teacher-signup-background-img-goes-here .sign-up-title,
    .administrator-signup-background-img-goes-here .sign-up-title {
        font-size: clamp(29px, 8vw, 42px);
    }

    .signup-form-box {
        padding: 21px 16px 25px;
    }

    .signup-field {
        margin-bottom: 20px;
    }

    .signup-field label {
        font-size: 15px;
    }

    .signup-field input,
    .signup-field select {
        height: 44px;
        font-size: 15px;
    }

    .signup-terms-label {
        font-size: 13px;
        line-height: 1.5;
    }

    .signup-terms-note {
        font-size: 12px;
    }

    .signup-create-button {
        height: 55px;
        font-size: 19px;
    }


    /* Footer */

    .site-footer {
        padding: 35px 20px 20px;
    }

    .footer-content {
        flex-direction: column;
        gap: 25px;
        margin-bottom: 30px;
    }

    .footer-brand h2 {
        font-size: 25px;
    }

    .footer-column {
        gap: 8px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .footer-bottom div {
        flex-wrap: wrap;
    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    body:has(.top-section) .logo-text h2,
    body.page-signup .logo-text h2,
    body.page-student-signup .logo-text h2 {
        font-size: 16px;
    }

    body:has(.top-section) nav a,
    body.page-signup nav a,
    body.page-student-signup nav a {
        font-size: 11px;
    }

    .top-section h1 {
        font-size: 34px;
    }

    .signup-background-img-goes-here .sign-up-title {
        font-size: 36px;
    }

    .signup-card {
        padding: 18px 14px;
    }

}

@media (max-width: 900px) {
    .signup-background-img-goes-here .sign-up-title,
    .login-background-img-goes-here .sign-up-title,
    .student-signup-background-img-goes-here .sign-up-title,
    .teacher-signup-background-img-goes-here .sign-up-title,
    .administrator-signup-background-img-goes-here .sign-up-title {
        margin-top: 0;
    }
}