@charset "UTF-8";

.header {
    height: calc(100vw - var(--side-gap) * 2);
}
@media (min-width: 640px) {
    .header {
        --top-padding: 48px;
        height: clamp(0px, (100vw - var(--side-gap) * 2) * 0.38, (var(--max-width) - var(--side-gap) * 2) * 0.38);
    }
}

.header-backdrop {
    background-image: url(./header-courses-mobile.132cfbd2.svg);
}
@media (min-width: 640px) {
    .header-backdrop {
        background-image: url(./header-courses.46b3b04a.svg);
    }
}

@media (min-width: 640px) {
    .header-backdrop h1 {
        margin-top: calc(var(--flow-space) * -2) !important;
    }
}

.header .header-backdrop img {
    max-width: calc(100% + var(--column-gap) * 2.5);
    width: calc(100% + var(--column-gap) * 2.5);
    height: auto;
    margin-bottom: 24px;
    margin-top: calc(4 * var(--flow-space));
}
@media (min-width: 640px) {
    .header .header-backdrop img {
        margin-bottom: 0;
        margin-top: 0;
    }
}

.courses-by-age .timeline {
    border: 1px solid #a4f0ef;
    background-image: linear-gradient(#ecf9ff 0%, rgba(236, 249, 255, 0.73) 55.61%, rgba(236, 249, 255, 0) 100%);
}

.courses-by-age :is(.age-number, ol) {
    display: grid;
    grid-template-columns: 1fr repeat(8, 2fr) 1fr;
}

.courses-by-age .age-number {
    padding: 16px 0;
    color: #428691;
    font-family: "Consolas", monospace;
    font-size: 14px;
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
    border-bottom: 1px solid #a4f0ef;
    background-color: #ffffff;
}

.courses-by-age .age-number span {
    width: -moz-fit-content;
    width: fit-content;
    transform: translateX(-50%);
}

.courses-by-age .age-number span:first-child {
    grid-column-start: 2;
}

.courses-by-age ol {
    padding: 24px 0;
    row-gap: 8px;
    counter-reset: courses-counter;
    background-image: linear-gradient(90deg, #ffffff 0%, #ffffff 49.99%, #ffffff00 50%, #ffffff00 100%);
    background-size: 16.6666666667%;
    background-position-x: calc(4.1666666667% + 8px);
}

.courses-by-age .course {
    position: relative;
    padding: 6px;
    counter-increment: courses-counter;
}

.courses-by-age .course-4-8 {
    grid-row: 5;
    grid-column: 2/7;
    width: 110%;
    background-image: linear-gradient(180deg, #dcf7fa 0%, #bef3f4 22%, #a4f0ef 85%, #91e0de 100%);
}

.courses-by-age .course-5-8 {
    grid-row: 4;
    grid-column: 2/5;
    width: 110%;
    background-image: linear-gradient(180deg, #dcf7fa 0%, #bef3f4 22%, #a4f0ef 85%, #91e0de 100%);
}

.courses-by-age .course-7-12 {
    grid-row: 3;
    grid-column: 1/6;
    width: 98%;
    background-image: linear-gradient(180deg, #fdde8d 0%, #f9c427 34%, #f9c427 69%, #eab725 100%);
}

.courses-by-age .course-10-16 {
    grid-row: 2;
    grid-column: 5/11;
    width: 97%;
    background-image: linear-gradient(180deg, #9e83fe 0%, #8968fd 32%, #6a47e3 86%, #5128e2 99%, #623de3 100%);
}

.courses-by-age .course-12-16 {
    grid-column: 10/15;
    width: 96%;
    background-image: linear-gradient(180deg, #ff6666 0%, #fe5151 31%, #df3434 83%, #d32d2d 100%);
}

.courses-by-age .course:after {
    content: none;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #ffffff;
    opacity: 0.7;
    font-family: "MADE Evolve Sans EVO", sans-serif;
    font-weight: 800;
    font-size: 60px;
    line-height: 60px;
}
@media (min-width: 640px) {
    .courses-by-age .course:after {
        content: counter(courses-counter);
    }
}

.courses-by-age .course .name {
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    padding: 10px;
    font-weight: 700;
    border-radius: calc(1.5rem - 3px);
    background-color: #ffffff;
}
@media (min-width: 640px) {
    .courses-by-age .course .name {
        padding: 18px 24px;
    }
}

.courses-by-age .course img {
    position: absolute;
    right: 0;
    top: 2px;
    width: 55px;
    transform: translate(calc(100% + 4px), 0);
}
@media (min-width: 640px) {
    .courses-by-age .course img {
        width: auto;
    }
}

.curriculum-detail .course-images {
    margin-bottom: 8px;
}
@media (min-width: 1024px) {
    .curriculum-detail .course-images {
        margin-bottom: 0;
    }
}

.curriculum-detail article {
    margin-bottom: 60px;
}
@media (min-width: 1024px) {
    .curriculum-detail article {
        margin-top: 60px;
        margin-bottom: 100px;
    }
}

.curriculum-detail h3 {
    position: relative;
    width: -moz-fit-content;
    width: fit-content;
}

.curriculum-detail .course-number {
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(55%, -50%);
    font-family: "MADE Evolve Sans EVO", sans-serif;
    font-size: 175px;
    z-index: -1;
}

.curriculum-detail li:nth-child(2) .course-number {
    transform: translateX(-15%);
}

.course-images .illustration {
    width: 80%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 640px) {
    .course-images .illustration {
        width: 100%;
    }
}
@media (min-width: 1024px) {
    .course-images .illustration {
        width: 90%;
    }
}
@media (min-width: 1440px) {
    .course-images .illustration {
        width: 80%;
    }
}

.curriculum-features ul {
    row-gap: 64px;
}
@media (min-width: 640px) {
    .curriculum-features ul {
        column-gap: 7%;
    }
}

.curriculum-features article .icon {
    margin-left: -3px;
    margin-bottom: 8px;
}

.compare {
    --square-grid-background: calc(50% + 530px) calc(50% + 320px) / 400px
    no-repeat url(./square-grid.82840b0b.svg);
    --plus-grid-background: calc(50% - 650px) calc(50% - 100px) / 200px no-repeat
    url(./plus-grid.ab3bacfa.svg);
    position: relative;
    background: var(--square-grid-background), var(--plus-grid-background);
    background-color: #dbd2ff;
}

.compare .grid-x > :is(.overline, h2) {
    position: relative;
    z-index: 1;
}

.purple-gradient {
    position: absolute;
    width: 70px;
    top: 54px;
    right: calc(8% + var(--side-gap));
    will-change: transform;
}
@media (min-width: 1024px) {
    .purple-gradient {
        width: 100px;
    }
}

.table-container {
    overflow: auto;
    padding-bottom: var(--section-padding-bottom);
    margin: 0 calc(var(--side-gap) * -1);
}

.compare table {
    --border-radius: 48px;
    --outer-border-thickness: 9px;
    --youcode-shadow-1: 4px rgba(136, 104, 252, 0.3);
    --youcode-shadow-2: 15px rgba(136, 104, 252, 0.2);
    --youcode-shadow-overhang: 2px 4px var(--youcode-shadow-1),
    5px 10px var(--youcode-shadow-2);
    --youcode-shadow-middle: 2px 2px var(--youcode-shadow-1),
    5px 15px var(--youcode-shadow-2);
    --inset: 10%;
    --hue: 253;
    --saturation-start: 100%;
    --saturation-end: 76%;
    --saturation-diff: calc(var(--saturation-start) - var(--saturation-end));
    --lightness-start: 79%;
    --lightness-end: 52%;
    --lightness-diff: calc(var(--lightness-start) - var(--lightness-end));
    padding: 0 var(--side-gap);
    margin-top: 32px;
    margin-bottom: 32px;
    min-width: calc(875px + var(--side-gap) * 2);
    filter: drop-shadow(10px 30px 30px rgba(112, 85, 216, 0.15));
    border-spacing: 0;
}
.compare table td,
.compare table th {
    position: relative;
    padding: 24px 16px;
    text-align: center;
}
.compare table td.youcode {
    padding-top: 9px;
}

.compare table col:not(.features) {
    width: 25%;
}

.compare table thead th:not(.youcode) {
    border-top: var(--outer-border-thickness) solid #5b44b4;
}
.compare table thead th:not(.youcode):last-of-type {
    border-right: var(--outer-border-thickness) solid #5b44b4;
    border-top-right-radius: var(--border-radius);
}

.compare table tbody td:last-of-type {
    height: 100%;
    border-right: var(--outer-border-thickness) solid #5b44b4;
}

.compare table tbody tr:last-of-type td:not(.youcode) {
    border-bottom: var(--outer-border-thickness) solid #5b44b4;
}
.compare table tbody tr:last-of-type td:not(.youcode):last-of-type {
    border-bottom-right-radius: var(--border-radius);
}

.compare table .overhang.top {
    border-top-left-radius: 100%;
    box-shadow: inset 0px var(--outer-border-thickness) 0px 0px #5b44b4;
}
.compare table .overhang.bottom {
    box-shadow: inset 0px calc(var(--outer-border-thickness) * -1 + 1px) 0px 0px #5b44b4;
}

.compare table :is(thead th:not(.youcode), tbody tr:not(:last-of-type) td):after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
    background-color: #dbd2ff;
}
.compare table :is(thead th:not(.youcode), tbody tr:not(:last-of-type) td):not(.youcode):after {
    width: 100%;
}
.compare table :is(thead th:not(.youcode), tbody tr:not(:last-of-type) td).youcode:after {
    left: var(--inset);
    width: calc(100% - var(--inset) * 2);
    border-radius: 1px;
    background-color: #9476ff;
}

.compare table td:not(.youcode):not(:last-of-type):before {
    content: "";
    position: absolute;
    top: var(--inset);
    right: 0;
    width: 1px;
    height: calc(100% - var(--inset) * 2);
    background-color: #dbd2ff;
}

.compare table tbody th {
    --border: 1px solid #8868fc;
    padding-left: 24px;
    padding-right: 24px;
    color: #ffffff;
    border-left: var(--border);
    background-color: #5b44b4;
}

.compare table tbody tr:first-of-type th {
    border-top: var(--border);
    border-top-left-radius: var(--border-radius);
}

.compare table tbody tr:last-of-type th {
    border-bottom: var(--border);
    border-bottom-left-radius: var(--border-radius);
}

.compare table :is(thead th, tbody td):not(.youcode) {
    background-color: #ffffff;
}

.compare table .youcode:not(.overhang),
.compare table .youcode.overhang.top:before,
.compare table .youcode.overhang.bottom:after {
    --saturation-from: calc(
            var(--saturation-start) - var(--saturation-diff) * var(--p-start)
    );
    --saturation-to: calc(
            var(--saturation-start) - var(--saturation-diff) * var(--p-end)
    );
    --lightness-from: calc(
            var(--lightness-start) - var(--lightness-diff) * var(--p-start)
    );
    --lightness-to: calc(
            var(--lightness-start) - var(--lightness-diff) * var(--p-end)
    );
    color: #ffffff;
    background-image: linear-gradient(hsl(var(--hue), var(--saturation-from), var(--lightness-from)), hsl(var(--hue), var(--saturation-to), var(--lightness-to)));
}

.compare table .youcode.overhang.top {
    background-image: linear-gradient(90deg, transparent, transparent 49.9%, #ffffff 50%, #ffffff);
}
.compare table .youcode.overhang.bottom {
    border: 0;
    border-bottom: 1px solid;
    -o-border-image: linear-gradient(90deg, #8868fc, #8868fc 49.9%, #5b44b4 50%, #5b44b4) 1;
    border-image: linear-gradient(90deg, #8868fc, #8868fc 49.9%, #5b44b4 50%, #5b44b4) 1;
    background-image: linear-gradient(90deg, #5b44b4, #5b44b4 49.9%, #ffffff 50%, #ffffff);
}
.compare table .youcode.overhang.top:before, .compare table .youcode.overhang.bottom:after {
    content: "";
    position: absolute;
    left: 0;
    height: calc(100% + 16px);
    width: 100%;
}
.compare table .youcode.overhang.top:before {
    bottom: 0;
    z-index: 1;
    box-shadow: var(--youcode-shadow-overhang);
    border-top-right-radius: var(--border-radius);
    border-top-left-radius: var(--border-radius);
}
.compare table .youcode.overhang.bottom:after {
    top: 0;
    z-index: 1;
    box-shadow: var(--youcode-shadow-overhang);
    border-bottom-right-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
}
.compare table .youcode.overhang p {
    position: relative;
    color: #ffffff;
    opacity: 1;
    z-index: 2;
}

.compare table td.youcode {
    box-shadow: var(--youcode-shadow-middle);
    z-index: 1;
}

.youcode-header {
    font-family: "MADE Evolve Sans EVO", sans-serif;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 16px;
    transform: translateY(-1px) scale(2.2);
}

td.youcode:before {
    --size: 16px;
    content: "";
    z-index: 2;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: var(--size);
    height: var(--size);
    margin-bottom: 6px;
    background: url(./5-stars.0a7010f8.svg) left center/auto var(--size) no-repeat;
}