.site-header {
    position: relative;
    z-index: 1030;
    border-bottom: 1px solid var(--edu-color-border);
    background: rgb(255 255 255 / 94%);
    backdrop-filter: blur(0.6rem);
    box-shadow: 0 0.25rem 1rem rgb(8 43 85 / 10%);
}

.site-header .navbar {
    min-height: 4.75rem;
}

.site-header .navbar-nav {
    margin-left: var(--edu-space-6);
    gap: var(--edu-space-1);
}

.site-header .nav-link {
    padding: 0.65rem 0.8rem;
    border-radius: var(--edu-radius-sm);
    color: var(--edu-color-text);
    font-weight: 700;
}

.site-header .nav-link:hover,
.site-header .nav-link:focus-visible {
    background: var(--edu-color-brand-100);
    color: var(--edu-color-brand-800);
}

.site-header .navbar-toggler {
    min-width: 2.9rem;
    min-height: 2.75rem;
    border-color: var(--edu-color-border-strong);
}

.site-main {
    flex: 1 0 auto;
    width: 100%;
    padding-block: clamp(0.75rem, 2vw, 1.5rem);
    /*background:
        radial-gradient(circle at 15% 10%, rgb(121 190 242 / 42%), transparent 30rem),
        linear-gradient(145deg, #155b9f 0%, #2878bd 48%, #164f91 100%);*/
    background: linear-gradient(90deg, #61BFE9, #C2EDFD);
}

.site-main > .container:not(.flash-zone),
.site-main > .hero {
    width: calc(100% - 1.5rem);
    margin-inline: auto;
    border: 1px solid #dddddd;
    /*border-radius: var(--edu-radius-xl);*/
    background: var(--edu-color-surface);
    box-shadow: 1px 1px 1px rgb(0 0 0 / 3%), var(--edu-shadow-md);
}

.site-main > .hero {
    max-width: 82.5rem;
    overflow: hidden;
    background: linear-gradient(135deg, #f3f0ff, #e8f8ff);
}

.site-main > .container:not(.flash-zone) + .container:not(.flash-zone) {
    margin-top: var(--edu-space-6);
}

.site-footer {
    margin-top: 0;
    padding: var(--edu-space-8) 0;
    background: var(--edu-color-text);
    color: #ffffff;
}

.site-footer a {
    color: #ffffff;
}

.edu-section {
    padding-block: var(--edu-space-12);
}

.edu-section--soft {
    background: var(--edu-color-surface-soft);
}

.edu-grid {
    display: grid;
    gap: var(--edu-space-6);
}

.edu-grid--cards {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.edu-adult-shell,
.edu-child-shell {
    min-height: 70vh;
}

.edu-child-shell {
    background: linear-gradient(180deg, #fff8dc 0%, #eefaff 100%);
}

.edu-game-shell {
    width: 100%;
    max-width: 90rem;
    margin-inline: auto;
}

.edu-game-frame {
    aspect-ratio: var(--edu-game-ratio);
    overflow: hidden;
    border: 1px solid var(--edu-color-border-strong);
    border-radius: var(--edu-radius-lg);
    background: #071326;
    box-shadow: var(--edu-shadow-lg);
}

.edu-ui-kit {
    padding-block: var(--edu-space-10) var(--edu-space-16);
}

.edu-ui-kit__section {
    padding-block: var(--edu-space-8);
    border-top: 1px solid var(--edu-color-border);
}

.edu-ui-kit__swatches {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    gap: var(--edu-space-4);
}

.edu-ui-kit__swatch {
    overflow: hidden;
    border: 1px solid var(--edu-color-border);
    border-radius: var(--edu-radius-md);
    background: var(--edu-color-surface);
}

.edu-ui-kit__swatch-color {
    display: block;
    min-height: 5rem;
    background: var(--edu-swatch);
}

.edu-ui-kit__swatch-label {
    display: block;
    padding: var(--edu-space-3);
    font-family: var(--edu-font-mono);
    font-size: var(--edu-text-xs);
}

.edu-ui-kit__swatch-color--brand-600 { background: var(--edu-color-brand-600); }
.edu-ui-kit__swatch-color--brand-700 { background: var(--edu-color-brand-700); }
.edu-ui-kit__swatch-color--text { background: var(--edu-color-text); }
.edu-ui-kit__swatch-color--page { background: var(--edu-color-page); }
.edu-ui-kit__swatch-color--accent { background: var(--edu-color-accent-500); }
.edu-ui-kit__swatch-color--success { background: var(--edu-color-success); }
.edu-ui-kit__swatch-color--warning { background: var(--edu-color-warning); }
.edu-ui-kit__swatch-color--danger { background: var(--edu-color-danger); }

.back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--edu-space-2);
    font-weight: 750;
}

.catalog-intro {
    max-width: 54rem;
}

.catalog-level-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--edu-space-3);
    margin-top: var(--edu-space-8);
    padding-bottom: var(--edu-space-6);
    border-bottom: 1px solid var(--edu-color-border);
}

.catalog-level-nav a {
    display: inline-flex;
    align-items: center;
    gap: var(--edu-space-2);
    min-height: 2.75rem;
    padding: var(--edu-space-2) var(--edu-space-4);
    border: 1px solid var(--edu-color-brand-200);
    border-radius: var(--edu-radius-pill);
    background: var(--edu-color-brand-100);
    font-weight: 800;
    text-decoration: none;
}

.catalog-level-nav span {
    display: inline-grid;
    min-width: 1.7rem;
    min-height: 1.7rem;
    place-items: center;
    border-radius: var(--edu-radius-pill);
    background: var(--edu-color-surface);
    font-size: var(--edu-text-xs);
}

.catalog-levels {
    display: grid;
    gap: var(--edu-space-10);
    margin-top: var(--edu-space-8);
}

.catalog-level-section {
    scroll-margin-top: var(--edu-space-4);
}

.catalog-level-section + .catalog-level-section {
    padding-top: var(--edu-space-10);
    border-top: 1px solid var(--edu-color-border);
}

.catalog-level-heading,
.catalog-more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--edu-space-5);
}

.catalog-level-heading h2,
.catalog-level-heading p {
    margin-bottom: 0;
}

.catalog-game-card {
    display: flex;
    flex-direction: column;
}

.catalog-game-card > .stretched-link {
    margin-top: auto;
}

.catalog-lock {
    font-size: 1.15rem;
}

.catalog-objectives {
    margin: var(--edu-space-4) 0 var(--edu-space-5);
    padding-top: var(--edu-space-4);
    border-top: 1px solid var(--edu-color-border);
}

.catalog-objectives ul {
    margin: 0;
    padding-left: 1.2rem;
    color: var(--edu-color-text-muted);
    font-size: var(--edu-text-sm);
}

.catalog-empty,
.catalog-more {
    padding: var(--edu-space-4) var(--edu-space-5);
    border-radius: var(--edu-radius-md);
    background: var(--edu-color-surface-soft);
    color: var(--edu-color-text-muted);
}

.catalog-more {
    margin-top: var(--edu-space-5);
}

.catalog-more a {
    position: relative;
    z-index: 1;
    font-weight: 800;
}

.how-intro {
    max-width: 56rem;
}

.how-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--edu-space-5);
    padding: 0;
    list-style: none;
}

.how-steps li {
    display: flex;
    align-items: flex-start;
    gap: var(--edu-space-4);
    padding: var(--edu-space-5);
    border: 1px solid var(--edu-color-border);
    border-radius: var(--edu-radius-lg);
    background: var(--edu-color-surface-soft);
}

.how-steps li > span {
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    flex: 0 0 2.6rem;
    place-items: center;
    border-radius: var(--edu-radius-pill);
    background: var(--edu-color-brand-600);
    color: #ffffff;
    font-weight: 850;
}

.how-steps h2 {
    margin: 0 0 var(--edu-space-2);
    font-size: var(--edu-text-lg);
}

.how-steps p,
.feature-card p {
    margin-bottom: 0;
}

.feature-section {
    padding-top: var(--edu-space-8);
    border-top: 1px solid var(--edu-color-border);
}

.faq-list {
    display: grid;
    gap: var(--edu-space-3);
    max-width: 56rem;
}

.faq-list details {
    overflow: hidden;
    border: 1px solid var(--edu-color-border);
    border-radius: var(--edu-radius-md);
    background: var(--edu-color-surface);
    box-shadow: var(--edu-shadow-sm);
}

.faq-list summary {
    padding: var(--edu-space-4) var(--edu-space-5);
    color: var(--edu-color-text);
    font-size: var(--edu-text-lg);
    font-weight: 800;
    cursor: pointer;
}

.faq-list details[open] summary {
    border-bottom: 1px solid var(--edu-color-border);
    background: var(--edu-color-brand-100);
}

.faq-list details > div {
    padding: var(--edu-space-4) var(--edu-space-5);
}

.faq-list p:last-child {
    margin-bottom: 0;
}

.account-heading {
    max-width: 54rem;
}

.account-section {
    padding-top: var(--edu-space-8);
    border-top: 1px solid var(--edu-color-border);
}

.account-section__heading,
.profile-list-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--edu-space-5);
}

.account-section__heading h2,
.account-section__heading p,
.profile-list-header h1 {
    margin-bottom: 0;
}

.account-section__heading p,
.profile-list-header p {
    color: var(--edu-color-text-muted);
}

.profile-card__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--edu-space-2);
    margin-top: auto;
}

.profile-card__actions form {
    margin: 0;
}

.account-link-card {
    display: flex;
    align-items: flex-start;
    gap: var(--edu-space-5);
    padding: var(--edu-space-6);
    border: 1px solid var(--edu-color-border);
    border-radius: var(--edu-radius-lg);
    background: var(--edu-color-surface-soft);
}

.account-link-card__icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    flex: 0 0 3rem;
    place-items: center;
    border-radius: var(--edu-radius-md);
    background: var(--edu-color-brand-100);
    color: var(--edu-color-brand-700);
    font-size: var(--edu-text-xl);
    font-weight: 850;
}

.account-link-card h3 {
    font-size: var(--edu-text-xl);
}

.account-empty {
    padding: var(--edu-space-8);
    border: 1px dashed var(--edu-color-border-strong);
    border-radius: var(--edu-radius-lg);
    background: var(--edu-color-surface-soft);
    text-align: center;
}

.profile-list {
    display: grid;
    gap: var(--edu-space-3);
    margin-top: var(--edu-space-5);
}

.profile-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--edu-space-5);
    padding: var(--edu-space-4) var(--edu-space-5);
    border: 1px solid var(--edu-color-border);
    border-radius: var(--edu-radius-md);
    background: var(--edu-color-surface);
}

.profile-list__identity,
.profile-list__actions {
    display: flex;
    align-items: center;
    gap: var(--edu-space-3);
}

.profile-list__identity img {
    border-radius: var(--edu-radius-pill);
}

.profile-list__identity strong,
.profile-list__identity small {
    display: block;
}

.profile-list__identity small {
    color: var(--edu-color-text-muted);
}

.profile-list__actions form {
    margin: 0;
}

.profile-list__actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.profile-form-shell {
    max-width: 56rem;
}

.profile-form {
    display: grid;
    gap: var(--edu-space-5);
}

.portrait-field {
    margin: 0;
    padding: var(--edu-space-5);
    border: 1px solid var(--edu-color-border);
    border-radius: var(--edu-radius-lg);
    background: var(--edu-color-surface-soft);
}

.portrait-field legend {
    float: none;
    width: auto;
    margin: 0;
    font-size: var(--edu-text-md);
    font-weight: 800;
}

.portrait-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--edu-space-3);
    margin-top: var(--edu-space-4);
}

.portrait-option {
    position: relative;
    cursor: pointer;
}

.portrait-option > .form-check {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.portrait-option > .form-check .form-check-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.portrait-option__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}

.portrait-option__content {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: var(--edu-space-2);
    min-height: 100%;
    padding: var(--edu-space-3);
    border: 2px solid var(--edu-color-border);
    border-radius: var(--edu-radius-md);
    background: var(--edu-color-surface);
    color: var(--edu-color-text);
    font-weight: 800;
    text-align: center;
    transition: border-color var(--edu-duration-fast) ease, box-shadow var(--edu-duration-fast) ease, transform var(--edu-duration-fast) ease;
}

.portrait-option__content img {
    width: min(6.5rem, 100%);
    aspect-ratio: 1;
    border-radius: var(--edu-radius-pill);
}

.portrait-option:hover .portrait-option__content {
    border-color: var(--edu-color-brand-200);
    transform: translateY(-2px);
}

.portrait-option:has(.portrait-option__input:checked) .portrait-option__content {
    border-color: var(--edu-color-brand-600);
    background: var(--edu-color-brand-100);
    box-shadow: 0 0 0 3px rgb(52 84 209 / 16%);
}

.portrait-option:has(.portrait-option__input:focus-visible) .portrait-option__content {
    outline: 3px solid var(--edu-color-focus);
    outline-offset: 3px;
}

.billing-page {
    max-width: 68rem;
}

.billing-page > header {
    max-width: 54rem;
}

.billing-current {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem);
    gap: var(--edu-space-6);
    padding: var(--edu-space-6);
    border: 1px solid var(--edu-color-brand-200);
    border-radius: var(--edu-radius-lg);
    background: linear-gradient(135deg, var(--edu-color-brand-100), #ffffff 72%);
    box-shadow: var(--edu-shadow-sm);
}

.billing-current__title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--edu-space-3);
}

.billing-current__title-row h2,
.billing-current__main > .eyebrow {
    margin-bottom: 0;
}

.billing-current__date {
    margin: var(--edu-space-3) 0 0;
}

.billing-current__action {
    padding-left: var(--edu-space-6);
    border-left: 1px solid var(--edu-color-brand-200);
}

.billing-current__action .btn {
    width: 100%;
}

.billing-current__action p {
    margin: var(--edu-space-3) 0 0;
    color: var(--edu-color-text-muted);
    font-size: var(--edu-text-sm);
}

.billing-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

.billing-tabs .nav-link {
    min-height: 2.9rem;
    color: var(--edu-color-text-muted);
    font-weight: 750;
    white-space: nowrap;
}

.billing-tabs .nav-link span {
    display: inline-grid;
    min-width: 1.5rem;
    min-height: 1.5rem;
    margin-left: var(--edu-space-1);
    place-items: center;
    border-radius: var(--edu-radius-pill);
    background: var(--edu-color-surface-soft);
    font-size: var(--edu-text-xs);
}

.billing-tab-content {
    min-height: 12rem;
    padding: var(--edu-space-5);
    border: 1px solid var(--edu-color-border);
    border-top: 0;
    border-radius: 0 0 var(--edu-radius-lg) var(--edu-radius-lg);
    background: var(--edu-color-surface-soft);
}

.billing-list {
    margin: 0;
}

.billing-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--edu-space-4);
}

.billing-item strong,
.billing-item span {
    display: block;
}

.billing-item > div > span {
    margin-top: var(--edu-space-1);
    color: var(--edu-color-text-muted);
    font-size: var(--edu-text-sm);
}

.billing-empty {
    padding: var(--edu-space-6);
    color: var(--edu-color-text-muted);
    text-align: center;
}

.status-pill--active,
.status-pill--trialing {
    background: var(--edu-color-success-soft);
    color: var(--edu-color-success);
}

.status-pill--grace,
.status-pill--past_due,
.status-pill--incomplete {
    background: var(--edu-color-warning-soft);
    color: var(--edu-color-warning);
}

.status-pill--unpaid,
.status-pill--incomplete_expired {
    background: var(--edu-color-danger-soft);
    color: var(--edu-color-danger);
}

@media (min-width: 62rem) {
    .edu-page-header--actions {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }
}

@media (max-width: 61.998rem) {
    .site-header .navbar-collapse {
        margin-top: var(--edu-space-3);
        padding: var(--edu-space-4) 0 var(--edu-space-2);
        border-top: 1px solid var(--edu-color-border);
    }

    .site-header .navbar-nav {
        margin: 0 0 var(--edu-space-4);
    }

    .site-header .nav-link {
        padding: 0.75rem;
    }

    .site-header__actions {
        align-items: stretch !important;
        flex-direction: column;
    }

    .site-header__actions form,
    .site-header__actions .btn {
        width: 100%;
    }

    .how-steps {
        grid-template-columns: 1fr;
    }

    .billing-current {
        grid-template-columns: 1fr;
    }

    .billing-current__action {
        padding: var(--edu-space-5) 0 0;
        border-top: 1px solid var(--edu-color-brand-200);
        border-left: 0;
    }
}

@media (max-width: 40rem) {
    .edu-section {
        padding-block: var(--edu-space-8);
    }

    .edu-page-header__actions .btn {
        width: 100%;
    }

    .site-main {
        padding-block: var(--edu-space-2);
    }

    .site-main > .container:not(.flash-zone),
    .site-main > .hero {
        width: calc(100% - 0.75rem);
        border-radius: var(--edu-radius-lg);
    }

    .site-footer .container {
        align-items: flex-start;
        flex-direction: column;
    }

    .catalog-level-heading,
    .catalog-more {
        align-items: flex-start;
        flex-direction: column;
    }

    .catalog-level-heading .btn {
        width: 100%;
    }

    .catalog-level-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .catalog-level-nav a {
        justify-content: space-between;
    }

    .how-intro .btn {
        width: 100%;
    }

    .how-steps li {
        padding: var(--edu-space-4);
    }

    .account-section__heading,
    .profile-list-header,
    .profile-list__item,
    .billing-item {
        align-items: stretch;
        flex-direction: column;
    }

    .account-section__heading .btn,
    .profile-list-header .btn,
    .profile-list__actions,
    .profile-list__actions .btn,
    .profile-list__actions form,
    .profile-card__actions,
    .profile-card__actions .btn,
    .profile-card__actions form {
        width: 100%;
    }

    .profile-list__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

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

    .account-link-card {
        flex-direction: column;
    }

    .billing-current,
    .billing-tab-content {
        padding: var(--edu-space-4);
    }

    .edu-empty-state {
        padding: var(--edu-space-6);
    }
}