@layer variables,
font-stack,
resets,
base,
elements,
components,
utils;

.demo {
    background-color: blue
}

@layer components {
    .c-dropdown {
        padding-block: var(--spacing-20);
        position: relative
    }

    .c-dropdown__combo *,
    .c-dropdown__combo :after,
    .c-dropdown__combo :before {
        box-sizing: border-box
    }

    .c-dropdown__combo {
        display: block;
        position: relative
    }

    .c-dropdown__combo:after {
        border-bottom: 2px solid rgba(0, 0, 0, .75);
        border-right: 2px solid rgba(0, 0, 0, .75);
        content: "";
        display: block;
        height: 9pt;
        pointer-events: none;
        position: absolute;
        right: 1pc;
        top: 50%;
        transform: translateY(-65%) rotate(45deg);
        width: 9pt
    }

    .c-dropdown__combo-input {
        border-block-end: 1px solid rgba(0, 0, 0, .75);
        color: transparent;
        display: block;
        font-family: var(--font-body) !important;
        font-size: var(--font-size-large);
        font-weight: var(--font-weight);
        line-height: var(--font-line-height);
        min-height: calc(1.4em + 26px);
        padding-block: var(--spacing-16);
        text-align: left;
        width: 100%
    }

    .c-dropdown__combo-input:focus {
        border-color: #0067b8;
        box-shadow: 0 0 4px 2px #0067b8;
        outline: 4px solid transparent
    }

    .c-dropdown__combo-menu {
        background-color: #f5f5f5;
        border: 1px solid rgba(0, 0, 0, .75);
        display: none;
        inline-size: 100%;
        left: 0;
        max-block-size: 300px;
        overflow-y: scroll;
        position: absolute;
        top: 100%;
        z-index: 100
    }

    .open .c-dropdown__combo-menu {
        display: block
    }

    .c-dropdown__combo-option {
        padding-block: var(--spacing-16);
        padding-inline-start: var(--spacing-24)
    }

    .c-dropdown__combo-option:hover {
        background-color: rgba(0, 0, 0, .1)
    }

    .c-dropdown__combo-option.option-current {
        outline: 3px solid #0067b8;
        outline-offset: -3px
    }

    .c-dropdown__combo-option[aria-selected=true] {
        padding-right: 30px;
        position: relative
    }

    .c-dropdown__combo-option[aria-selected=true]:after {
        border-bottom: 2px solid #000;
        border-right: 2px solid #000;
        content: "";
        height: 1pc;
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
        width: 8px
    }

    .c-dropdown select {
        display: none
    }

    .c-dropdown__combo-label {
        display: inline;
        font-size: var(--font-size-large);
        position: absolute;
        top: 37px
    }

    .c-dropdown--selected-value .c-dropdown__combo-label,
    .c-dropdown__combo-label {
        font-family: var(--font-body) !important;
        font-weight: var(--font-weight);
        line-height: var(--font-line-height)
    }

    .c-dropdown--selected-value .c-dropdown__combo-label {
        font-size: var(--font-size-small);
        top: 0
    }

    .c-dropdown--selected-value .c-dropdown__combo-input {
        color: inherit
    }

    .c-dropdown--error .c-dropdown__combo-label {
        color: var(--color-error)
    }

    .c-dropdown--error .c-dropdown__combo-input {
        color: transparent
    }

    .c-dropdown--error .c-dropdown__error-message {
        color: var(--color-error);
        font-family: var(--font-body) !important;
        font-size: var(--font-size-small);
        font-weight: var(--font-weight);
        line-height: var(--font-line-height);
        position: absolute
    }

    .c-global-footer {
        padding-block: clamp(var(--spacing-48), 4vi, var(--spacing-64));
        padding-inline: var(--page-padding-inline)
    }

    .c-global-footer__categories {
        display: grid;
        gap: var(--spacing-64);
        grid-template-columns: repeat(auto-fit, minmax(20ch, 1fr))
    }

    .c-global-footer__category {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-32)
    }

    .c-global-footer__category-header {
        font-family: var(--font-body) !important;
        font-size: var(--font-size-eyebrow-small) !important;
        font-weight: var(--font-weight) !important;
        letter-spacing: var(--font-letter-spacing-loose) !important;
        line-height: var(--font-line-height-3xtight) !important;
        text-transform: uppercase !important
    }

    .c-global-footer__category-list {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-16);
        list-style: none;
        margin: 0 !important;
        padding: 0 !important
    }

    .c-global-footer__category-link {
        color: var(--color-on-surface) !important;
        font-family: var(--font-body) !important;
        font-size: var(--font-size-medium) !important;
        font-weight: var(--font-weight) !important;
        line-height: var(--font-line-height) !important;
        text-decoration: none !important
    }
}

@layer components {
    @media(hover:hover) {
        .c-global-footer__category-link:hover {
            text-decoration: underline !important;
            text-underline-offset: .3em
        }
    }

    .c-global-footer__icon {
        block-size: var(--spacing-24);
        color: var(--color-on-surface);
        inline-size: var(--spacing-24)
    }

    .c-global-footer__bottom {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-24);
        justify-content: space-between;
        margin-block-start: var(--spacing-64)
    }

    .c-global-footer__utility-group {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-24)
    }

    @media(min-width:769px) {
        .c-global-footer__utility-group {
            gap: 0
        }
    }

    .c-global-footer__utility-nav {
        font-family: var(--font-body) !important;
        font-size: var(--font-size-small) !important;
        font-weight: var(--font-weight) !important;
        line-height: var(--font-line-height) !important
    }

    .c-global-footer__utility-nav ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        list-style: none;
        margin-block: 1ex 0 !important;
        margin-inline: 0 !important;
        padding: 0 !important
    }

    .c-global-footer__utility-nav ul li {
        align-items: center;
        display: flex;
        margin: 0 !important;
        padding: 0 !important
    }

    .c-global-footer__utility-nav ul li:after {
        background-color: var(--color-outline);
        block-size: .8em;
        content: "";
        inline-size: 1px;
        margin-inline: .75ch
    }

    .c-global-footer__utility-nav ul li:last-of-type:after {
        display: none
    }

    .c-global-footer__utility-nav .ot-sdk-show-settings,
    .c-global-footer__utility-nav a {
        color: var(--color-on-surface) !important;
        display: block;
        font-family: var(--font-body) !important;
        font-size: var(--font-size-small) !important;
        font-weight: var(--font-weight) !important;
        line-height: var(--font-line-height) !important;
        padding: 0 !important;
        text-decoration: none !important
    }

    .c-global-footer__utility-nav .ot-sdk-show-settings:hover,
    .c-global-footer__utility-nav a:hover {
        text-decoration: underline !important
    }

    .c-global-footer__utility-nav .ot-sdk-show-settings {
        word-wrap: normal !important;
        background: none !important;
        border: 0 !important;
        color: inherit !important;
        margin: 0 !important;
        padding: 0 !important
    }

    .c-global-footer__copyright-disclaimers {
        font-family: var(--font-body) !important;
        font-size: var(--font-size-small) !important;
        font-weight: var(--font-weight) !important;
        line-height: var(--font-line-height) !important;
        margin: 0 !important;
        padding: 0 !important
    }

    .c-global-footer__social-media {
        display: flex;
        gap: var(--spacing-16)
    }

    .c-global-footer__social-media-link {
        align-items: center;
        display: flex
    }

    .c-global-nav {
        --accordion-icon-size: 2.75rem;
        align-items: center;
        background-color: var(--color-surface);
        border: none;
        display: grid;
        inset-block-start: 0;
        inset-inline: 0;
        max-width: 100%;
        position: fixed;
        width: 100vw;
        block-size: var(--global-nav-size);
        overflow: inherit;
        z-index: var(--z-nav)
    }

    .c-global-nav__container {
        padding-inline: var(--old-page-padding-inline) !important
    }

    .c-global-nav__container-list {
        align-items: center;
        display: flex;
        gap: var(--spacing-16);
        inline-size: 100%;
        justify-content: space-between;
        list-style: none;
        margin: 0 !important;
        min-block-size: 100%;
        padding: 0 !important
    }

    .c-global-nav__container-list--mobile {
        align-items: flex-start;
        flex-direction: column
    }

    .c-global-nav__contact-item,
    .c-global-nav__register-item {
        display: none
    }

    .c-global-nav__contact-item>a,
    .c-global-nav__register-item>a {
        align-items: center;
        color: var(--color-on-surface) !important;
        display: flex;
        text-decoration: none !important
    }
}

@layer components {
    @media(hover:hover) {

        .c-global-nav__contact-item>a:hover,
        .c-global-nav__register-item>a:hover {
            text-decoration: underline !important;
            text-underline-offset: .3em
        }
    }

    @media(min-width:1025px) {

        .c-global-nav__contact-item,
        .c-global-nav__register-item {
            align-items: center;
            block-size: 100%;
            color: var(--color-on-surface) !important;
            display: flex;
            justify-content: center
        }
    }

    .c-global-nav__hamburger-btn-copy,
    .c-global-nav__register-item {
        align-items: center;
        display: flex;
        font-family: var(--font-body) !important;
        font-size: var(--font-size-eyebrow-small) !important;
        font-weight: var(--font-weight-semibold) !important;
        justify-content: space-between;
        letter-spacing: var(--font-letter-spacing-loose) !important;
        line-height: var(--font-line-height-3xtight) !important;
        text-transform: uppercase !important
    }

    .c-global-nav__contact-item,
    .c-global-nav__language-selector {
        font-family: var(--font-body) !important;
        font-size: var(--font-size-small) !important;
        font-weight: var(--font-weight) !important;
        line-height: var(--font-line-height) !important;
        order: 3
    }

    .c-global-nav__contact-item {
        align-items: center;
        block-size: 100%;
        text-decoration: none !important
    }

    @media(min-width:1025px) {
        .c-global-nav__contact-item {
            display: flex
        }
    }

    .c-global-nav__contact-item--mobile {
        display: none
    }

    @media(max-width:1023px) {
        .c-global-nav__contact-item--mobile {
            display: flex
        }
    }

    .c-global-nav__register-item {
        order: 3
    }

    @media(min-width:1025px) {
        .c-global-nav__register-item {
            order: 1
        }
    }

    .c-global-nav__hamburger {
        order: 1
    }

    .c-global-nav__hamburger-btn {
        align-items: center;
        background: none !important;
        border: none !important;
        display: flex;
        text-decoration: none !important
    }

    @media(hover:hover) {
        .c-global-nav__hamburger-btn:hover {
            text-decoration: underline !important;
            text-underline-offset: .3em
        }
    }

    .c-global-nav__hamburger-btn-copy {
        color: var(--color-on-surface) !important;
        margin-inline-start: var(--spacing-2) !important;
        text-transform: uppercase
    }

    .c-global-nav__hamburger-btn-animation {
        cursor: pointer;
        display: inline-block
    }

    .c-global-nav__hamburger-btn-animation-line {
        background: var(--color-on-surface);
        block-size: 1px;
        display: block;
        inline-size: 1.5625rem;
        margin-block: .44rem;
        margin-inline: auto var(--spacing-4)
    }

    @media(prefers-reduced-motion:no-preference) {
        .c-global-nav__hamburger-btn-animation-line {
            transition: all .3s ease-in-out
        }
    }

    .c-global-nav__hamburger-btn-animation--open span:first-child {
        transform: translateY(.5rem) rotate(45deg)
    }

    .c-global-nav__hamburger-btn-animation--open span:nth-child(2) {
        opacity: 0
    }

    .c-global-nav__hamburger-btn-animation--open span:nth-child(3) {
        transform: translateY(-.5rem) rotate(-45deg)
    }

    .c-global-nav__language-selector {
        display: none;
        position: relative
    }

    .c-global-nav__language-selector-chevron {
        align-items: center;
        background: none !important;
        border: none !important;
        color: var(--color-on-surface) !important;
        display: flex;
        margin-inline-end: var(--spacing-4) !important
    }

    @media(min-width:1025px)and (hover:hover) {
        .c-global-nav__language-selector-chevron:hover {
            text-decoration: underline !important;
            text-underline-offset: .3em
        }
    }

    .c-global-nav__language-selector-list {
        background: var(--color-surface);
        border: 1px solid var(--color-outline-variant);
        display: none;
        flex-direction: column;
        grid-row-start: 2;
        inline-size: 18rem;
        inset-block-start: 1.2rem;
        inset-inline-end: 0;
        list-style: none;
        margin: 0 !important;
        padding: 0 !important;
        position: absolute;
        z-index: var(--z-nav)
    }

    .c-global-nav__language-selector-list-item {
        margin-inline-end: 0 !important
    }

    .c-global-nav__language-selector-list-item>a {
        color: var(--color-on-surface) !important;
        display: block;
        font-family: var(--font-body) !important;
        font-size: var(--font-size-small) !important;
        font-weight: var(--font-weight) !important;
        line-height: var(--font-line-height) !important;
        padding-block: var(--spacing-16) !important;
        padding-inline: var(--spacing-24) !important;
        text-decoration: none !important
    }

    @media(hover:hover) {
        .c-global-nav__language-selector-list-item>a:hover {
            background: var(--color-on-surface) !important;
            color: var(--color-surface) !important
        }
    }

    .c-global-nav__language-selector--open .c-global-nav__language-selector-list {
        display: flex
    }

    .c-global-nav__language-selector--open .c-global-nav__language-selector-chevron svg {
        transform: rotate(180deg)
    }

    @media(min-width:1025px) {
        .c-global-nav__language-selector {
            display: grid
        }
    }

    .c-global-nav__language-selector--mobile {
        border-block-end: 1px solid var(--color-primary);
        display: grid;
        inline-size: 100%
    }

    .c-global-nav__language-selector--mobile .c-global-nav__language-selector-chevron {
        display: flex;
        justify-content: space-between;
        padding-block-end: var(--spacing-16) !important
    }

    .c-global-nav__language-selector--mobile .c-global-nav__language-selector-list {
        grid-row-start: unset;
        inline-size: 15rem;
        inset-block-end: 100%;
        inset-block-start: unset
    }

    @media(min-width:1025px) {
        .c-global-nav__language-selector--mobile {
            display: none
        }
    }

    .c-global-nav__logo-item {
        align-items: center;
        block-size: 100%;
        color: var(--color-on-surface) !important;
        display: flex;
        grid-column: 2;
        justify-content: center;
        margin-inline: auto !important;
        order: 2
    }

    .c-global-nav__logo {
        color: var(--color-on-surface) !important;
        justify-self: center
    }

    @media(min-width:1025px) {
        .c-global-nav__logo {
            transform: translatex(-38%)
        }
    }

    .c-global-nav__logo svg {
        block-size: 2.06rem;
        inline-size: auto
    }

    .c-global-nav__menu {
        display: none
    }

    @media screen and (min-width:62rem) {
        .c-global-nav .__hide-desktop {
            display: none
        }
    }

    @media screen and (max-width:62rem) {
        .c-global-nav .__hide-mobile {
            display: none !important
        }
    }

    .c-global-nav--open .c-global-nav__menu {
        background: var(--color-surface);
        block-size: calc(100dvb - var(--global-nav-size));
        border: 0;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-40);
        inline-size: 100%;
        inset-block-start: var(--global-nav-size);
        left: 0;
        order: 1;
        overflow-x: hidden;
        overflow-y: auto;
        padding-block: var(--spacing-64) !important;
        padding-block-end: 0 !important;
        padding-block-end: env(safe-area-inset-bottom) !important;
        position: fixed;
        z-index: var(--z-nav-dropdown)
    }

    @media(min-width:1025px) {
        .c-global-nav--open .c-global-nav__menu {
            flex-direction: column;
            flex-wrap: wrap
        }
    }

    .c-global-nav--open .c-global-nav__menu-wrapper {
        margin-inline: var(--page-padding-inline) !important;
        order: 2
    }

    @media(min-width:1025px) {
        .c-global-nav--open .c-global-nav__menu-wrapper {
            margin-inline: var(--page-padding-inline) var(--spacing-120) !important;
            order: 1
        }
    }

    .c-global-nav--open .c-global-nav__menu-title {
        color: var(--color-on-surface);
        font-family: var(--font-body) !important;
        font-size: var(--font-size-eyebrow-small) !important;
        font-weight: var(--font-weight) !important;
        letter-spacing: var(--font-letter-spacing-loose) !important;
        line-height: var(--font-line-height-3xtight) !important;
        margin-block-end: var(--spacing-32) !important;
        text-transform: uppercase !important
    }

    .c-global-nav--open .c-global-nav__menu-list {
        font-weight: var(--font-weight-semibold);
        list-style: none;
        margin: 0 !important;
        padding: 0 !important
    }

    .c-global-nav--open .c-global-nav__menu-item {
        margin-block-end: 0 !important;
        margin-block-start: var(--spacing-20) !important
    }

    .c-global-nav--open .c-global-nav__menu-item>a {
        color: var(--color-on-surface) !important;
        display: block;
        font-family: var(--font-heading-variant) !important;
        font-size: var(--font-size-heading-xsmall) !important;
        font-weight: var(--font-weight-semibold) !important;
        line-height: var(--font-line-height-xtight) !important;
        text-decoration: none !important
    }

    @media(hover:hover) {
        .c-global-nav--open .c-global-nav__menu-item>a:hover {
            text-decoration: underline !important;
            text-underline-offset: .3em
        }
    }

    @media(min-width:1025px) {
        .c-global-nav--open .c-global-nav__menu {
            flex-direction: row
        }
    }

    .c-global-nav--open .c-global-nav__items-secondary {
        margin-inline: var(--page-padding-inline) !important;
        order: 3
    }

    @media(min-width:1025px) {
        .c-global-nav--open .c-global-nav__items-secondary {
            display: none
        }
    }

    .c-global-nav--open .c-global-nav__accordion {
        --accordion-icon-size: 2.125rem;
        align-self: flex-start;
        border-block-end: 1px solid var(--color-primary);
        flex: unset;
        inline-size: 100%;
        list-style: none;
        margin: 0 !important;
        margin-inline: var(--page-padding-inline) 0 !important;
        order: 1;
        padding: 0 !important
    }

    @media(min-width:1025px) {
        .c-global-nav--open .c-global-nav__accordion {
            margin-inline: 0 !important;
            order: 2
        }
    }

    .c-global-nav--open .c-global-nav__accordion-item {
        border-block-start: 1px solid var(--color-primary)
    }

    .c-global-nav--open .c-global-nav__accordion-header {
        align-items: center;
        background: none !important;
        border: none !important;
        color: var(--color-on-surface) !important;
        display: grid;
        font-family: var(--font-heading-variant) !important;
        font-size: var(--font-size-heading-xsmall) !important;
        font-weight: var(--font-weight-semibold) !important;
        gap: var(--gutter);
        grid-template-columns: auto 1fr;
        inline-size: 100%;
        line-height: var(--font-line-height-xtight) !important;
        margin-block: var(--spacing-20) !important;
        padding-block: 0 !important;
        padding-inline: 0 !important;
        text-align: start
    }

    .c-global-nav--open .c-global-nav__accordion-header .c-global-nav__accordion-icon {
        block-size: var(--accordion-icon-size);
        border: 1px solid var(--color-outline-variant);
        border-radius: 100em;
        display: grid;
        font-size: 1rem;
        inline-size: var(--accordion-icon-size);
        place-items: center;
        transition: background-color var(--easing)
    }

    .c-global-nav--open .c-global-nav__accordion-header .c-global-nav__accordion-icon>svg {
        --icon-size: 1em
    }

    .c-global-nav--open .c-global-nav__accordion-header[aria-expanded=false] .c-global-nav__accordion-icon--minus,
    .c-global-nav--open .c-global-nav__accordion-header[aria-expanded=true] .c-global-nav__accordion-icon--plus {
        display: none
    }

    @media(hover:hover) {
        .c-global-nav--open .c-global-nav__accordion-header:hover .c-global-nav__accordion-icon {
            background-color: var(--color-primary) !important;
            color: var(--color-on-primary) !important
        }
    }

    .c-global-nav--open .c-global-nav__accordion-panel {
        align-items: start;
        display: grid;
        grid-template-rows: 0;
        overflow: hidden;
        padding-inline-end: var(--page-padding-inline) !important;
        padding-inline-start: 0 !important;
        transition: grid-template-rows var(--easing);
        visibility: hidden
    }

    .c-global-nav--open .c-global-nav__accordion-panel-container {
        container-type: inline-size;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        padding-block-end: var(--spacing-24) !important
    }

    .c-global-nav--open .c-global-nav__accordion-panel-container .c-global-nav__accordion-panel-view-all-cta {
        flex-basis: 100%
    }

    .c-global-nav--open .c-global-nav__accordion-panel-container-column,
    .c-global-nav--open .c-global-nav__accordion-panel-container-column-alt {
        min-inline-size: 25ch
    }

    .c-global-nav--open .c-global-nav__accordion-panel-container-column-alt>ul,
    .c-global-nav--open .c-global-nav__accordion-panel-container-column>ul {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-12);
        list-style: none;
        margin-block-end: var(--spacing-40) !important;
        margin-inline-end: var(--spacing-24) !important;
        padding: 0 !important
    }

    .c-global-nav--open .c-global-nav__accordion-panel-container-column-alt>ul>li a,
    .c-global-nav--open .c-global-nav__accordion-panel-container-column>ul>li a {
        color: var(--color-on-surface) !important;
        display: block;
        font-family: var(--font-body) !important;
        font-size: var(--font-size-small) !important;
        font-weight: var(--font-weight) !important;
        line-height: var(--font-line-height) !important;
        text-decoration: none !important
    }

    @media(hover:hover) {

        .c-global-nav--open .c-global-nav__accordion-panel-container-column-alt>ul>li a:hover,
        .c-global-nav--open .c-global-nav__accordion-panel-container-column>ul>li a:hover {
            text-decoration: underline !important;
            text-underline-offset: .3em
        }
    }

    .c-global-nav--open .c-global-nav__accordion-panel-container-column-alt>ul>li a>span,
    .c-global-nav--open .c-global-nav__accordion-panel-container-column>ul>li a>span {
        font-size: var(--font-size-heading-small);
        font-weight: var(--font-weight-semibold)
    }

    .c-global-nav--open .c-global-nav__accordion-panel-container-column {
        block-size: 50%;
        flex: 1 1 50%
    }

    .c-global-nav--open .c-global-nav__accordion-panel-container-column .c-global-nav__accordion-panel-category {
        align-items: baseline;
        display: inline-flex;
        gap: 1ch
    }

    .c-global-nav--open .c-global-nav__accordion-panel-container-column .c-global-nav__accordion-panel-category a.c-global-nav__accordion-panel-category-link {
        color: var(--color-on-surface) !important;
        font-family: var(--font-heading-variant) !important;
        font-size: var(--font-size-heading-small) !important;
        font-weight: var(--font-weight-semibold) !important;
        line-height: var(--font-line-height-xtight) !important;
        text-decoration: none !important
    }

    @media(hover:hover) {
        .c-global-nav--open .c-global-nav__accordion-panel-container-column .c-global-nav__accordion-panel-category a.c-global-nav__accordion-panel-category-link:hover {
            text-decoration: underline !important;
            text-underline-offset: .3em
        }
    }

    .c-global-nav--open .c-global-nav__accordion-panel-container-column .c-global-nav__accordion-panel-category a.c-global-nav__accordion-panel-category-link--register {
        color: var(--color-primary) !important;
        font-family: var(--font-body) !important;
        font-size: var(--font-size-eyebrow-small) !important;
        font-weight: var(--font-weight-semibold) !important;
        letter-spacing: var(--font-letter-spacing-loose) !important;
        line-height: var(--font-line-height-3xtight) !important;
        text-transform: uppercase !important
    }

    .c-global-nav--open .c-global-nav__accordion-panel-container-column-alt {
        flex: 1 1 100%
    }

    @media(min-width:769px) {
        .c-global-nav--open .c-global-nav__accordion-panel-container {
            flex-direction: row
        }
    }

    .c-global-nav--open .c-global-nav__accordion-panel--open {
        grid-template-rows: auto;
        visibility: visible
    }

    .c-global-nav--open .c-global-nav__accordion-panel-eyebrow {
        block-size: 100%;
        color: var(--color-on-surface) !important;
        font-family: var(--font-body) !important;
        font-size: var(--font-size-eyebrow-small) !important;
        font-weight: var(--font-weight) !important;
        inline-size: 100%;
        letter-spacing: var(--font-letter-spacing-loose) !important;
        line-height: var(--font-line-height-3xtight) !important;
        margin-block-end: var(--spacing-12) !important;
        min-block-size: 1em;
        text-transform: uppercase !important;
        text-transform: uppercase
    }

    @media(min-width:321px) {
        .c-global-nav--open .c-global-nav__accordion-panel-eyebrow {
            white-space: nowrap
        }
    }

    @media(min-width:1025px) {
        .c-global-nav--open .c-global-nav__accordion {
            border-block-end: 1px solid var(--color-primary);
            display: flex;
            flex: 2;
            flex-direction: column;
            padding-inline: 0 !important
        }

        .c-global-nav--open .c-global-nav__accordion-header {
            font-family: var(--font-heading-variant) !important;
            font-size: var(--font-size-heading-large) !important;
            font-weight: var(--font-weight) !important;
            line-height: var(--font-line-height) !important;
            margin-block: var(--spacing-24) !important;
            padding-block: 0 !important;
            padding-inline: 0 var(--page-padding-inline) !important
        }

        .c-global-nav--open .c-global-nav__accordion-header .c-global-nav__accordion-icon {
            font-size: 1.5rem
        }

        .c-global-nav--open .c-global-nav__accordion-panel {
            padding-inline-start: calc(var(--accordion-icon-size) + var(--gutter)) !important
        }

        .c-global-nav--open .c-global-nav__accordion-item {
            border-block-start: 1px solid var(--color-primary)
        }
    }

    .c-global-nav--open .c-global-nav__search {
        inline-size: 100%;
        margin-block-start: auto !important;
        order: 4;
        position: relative
    }

    .c-global-nav--open .c-global-nav__search .c-search__search-form {
        padding-inline: var(--page-padding-inline) !important
    }

    .c-pillar {
        --_headline-size: clamp(var(--font-size-heading-large), var(--font-size-heading-large) * 0.7 + 3vi, var(--font-size-heading-4xlarge));
        --_headline-line-height: calc(4rem + 4vi);
        --_image-inline-size: 100%;
        --_image-aspect-ratio: 4/3;
        display: grid;
        gap: var(--spacing-32);
        inline-size: 100vi;
        margin-inline-start: calc(50% - 50vi);
        padding-block: var(--module-padding-block)
    }

    .c-pillar__cta-wrapper,
    .c-pillar__headline-text,
    .c-pillar__image-wrapper,
    .c-pillar__logo {
        padding-inline: var(--page-padding-inline)
    }
}

@layer components {
    @media(min-width:1025px) {
        .c-pillar {
            --_headline-line-height: clamp(6rem, (5rem + 1.75vi), 9rem);
            --_image-inline-size: 30rem;
            --_image-aspect-ratio: unset;
            position: relative
        }

        .c-pillar__cta-wrapper,
        .c-pillar__headline-text,
        .c-pillar__logo {
            padding-inline-end: calc(var(--_image-inline-size) + var(--page-padding-inline) + var(--spacing-32))
        }

        .c-pillar__image-wrapper {
            inset-block: 0;
            inset-inline-end: 0;
            padding-block: calc(var(--module-padding-block)/2);
            position: absolute
        }

        .c-pillar .c-pillar__image {
            block-size: 100%;
            max-block-size: calc(100vb - var(--module-padding-block)*2);
            min-block-size: 20rem
        }
    }

    .c-pillar__logo svg {
        block-size: clamp(1.45rem, 4.5vi, 2.375rem);
        inline-size: auto
    }

    .c-pillar__headline-text {
        background-image: repeating-linear-gradient(to bottom, var(--color-outline-highlight), var(--color-outline-highlight) 1px, transparent 1px, transparent);
        background-size: var(--_headline-line-height) var(--_headline-line-height);
        display: grid;
        font-family: var(--font-heading) !important;
        font-size: var(--font-size-heading-4xlarge);
        font-size: var(--_headline-size);
        font-weight: var(--font-weight);
        line-height: var(--font-line-height-3xtight);
        line-height: var(--_headline-line-height);
        margin-block-start: clamp(var(--spacing-32), 4vi, var(--spacing-40));
        padding-block-end: var(--spacing-40)
    }

    .c-pillar__headline {
        display: grid;
        line-height: 1
    }

    .c-pillar__image-wrapper .c-pillar__image {
        aspect-ratio: var(--_image-aspect-ratio);
        display: block;
        inline-size: var(--_image-inline-size);
        object-fit: cover
    }

    .c-hero-edit-mode {
        min-block-size: auto
    }

    .c-home {
        --_z-above: var(--z-container-high);
        --_z-below: var(--z-reset);
        --_headline-size: clamp(var(--font-size-heading-xlarge), var(--font-size-heading-xlarge) * 0.7 + 4vi, var(--font-size-heading-4xlarge));
        display: flex;
        flex-direction: column;
        position: relative
    }

    .c-home__media-container {
        display: grid;
        grid-template-areas: "spacing""heading";
        grid-template-rows: minmax(5rem, 1fr) auto;
        inline-size: 100%;
        min-block-size: 62vb;
        overflow: hidden;
        position: relative
    }
}

@layer components {
    @media(min-width:769px) {
        .c-home__media-container {
            min-block-size: 100vb
        }
    }

    :has(.c-global-nav) .c-home__media-container {
        min-block-size: calc(100vb - var(--global-nav-size))
    }

    :has(.c-sub-navigation) .c-home__media-container {
        min-block-size: calc(100vb - var(--global-nav-size) - var(--sub-nav-size))
    }

    :has(.c-hero-edit-mode) .c-home__media-container {
        min-block-size: unset !important
    }

    .c-home__media-container:after,
    .c-home__media-container:before {
        block-size: 100%;
        content: "";
        inset-block-start: 0;
        inset-inline: 0;
        position: absolute;
        z-index: var(--z-container-xhigh)
    }

    .c-home__media-container:before {
        background: var(--color-overlay)
    }

    @media(min-width:769px) {
        .c-home__media-container:after {
            background: linear-gradient(to right, transparent 0, transparent calc(var(--page-padding-inline) - .5px), var(--color-outline) calc(var(--page-padding-inline) - .5px), var(--color-outline) calc(var(--page-padding-inline) + .5px), transparent calc(var(--page-padding-inline) + .5px))
        }
    }

    .c-home__media {
        block-size: 100%;
        inline-size: 100%;
        inset-block-start: 0;
        inset-inline-start: 0;
        position: absolute
    }

    .c-home__media--image {
        object-fit: cover
    }

    .c-home__media--video {
        object-fit: cover;
        z-index: var(--z-container-high)
    }

    .c-home__media--mobile {
        display: block
    }

    @media(min-width:1025px) {
        .c-home__media--mobile {
            display: none
        }
    }

    .c-home__media--desktop {
        display: none
    }

    @media(min-width:1025px) {
        .c-home__media--desktop {
            display: block
        }
    }

    .c-home__play-button {
        --icon-size: 1.5rem;
        background-color: var(--color-primary);
        block-size: 2.75rem;
        border: 1px solid var(--color-primary);
        border-radius: 100%;
        color: var(--brand-midnight);
        display: grid;
        inline-size: 2.75rem;
        inset-block-start: var(--spacing-20);
        inset-inline-start: var(--spacing-20);
        place-items: center;
        position: absolute;
        z-index: var(--z-container-2xhigh)
    }

    .c-home__content,
    .c-home__headline {
        font-family: var(--font-heading) !important;
        font-size: var(--font-size-heading-4xlarge);
        font-size: var(--_headline-size);
        font-weight: var(--font-weight);
        line-height: var(--font-line-height-3xtight);
        line-height: var(--font-line-height-xtight)
    }

    @media(min-width:769px) {

        .c-home__content,
        .c-home__headline {
            line-height: var(--font-line-height-3xtight)
        }
    }

    .c-home__headline {
        grid-area: heading;
        padding-block: clamp(var(--spacing-32), 8.5vi, var(--spacing-72));
        padding-inline: var(--page-padding-inline);
        position: relative;
        z-index: var(--z-container-xhigh)
    }

    @media(min-width:769px) {
        .c-home__headline {
            padding-inline-start: calc(var(--page-padding-inline) + 6vi)
        }
    }

    .c-home__headline:before {
        background-color: var(--color-outline);
        block-size: 1px;
        content: "";
        inline-size: 100%;
        inset-block-start: 0;
        inset-inline-start: 0;
        position: absolute
    }

    .c-home__content {
        display: flex;
        flex-direction: column;
        gap: clamp(var(--spacing-12), 6.75vi, var(--spacing-32));
        z-index: var(--z-container-high)
    }

    .c-home__subheadline {
        overflow: hidden
    }

    .c-home__subheadline-text {
        display: block;
        padding-block: clamp(var(--spacing-16), 8.5vi, var(--spacing-72));
        padding-inline: var(--page-padding-inline);
        position: relative
    }

    .c-home__subheadline-text:before {
        background-color: var(--color-outline);
        block-size: 1px;
        content: "";
        inline-size: 100%;
        inset-block-start: 0;
        inset-inline-end: 0;
        position: absolute
    }

    @media(prefers-reduced-motion:no-preference) {
        .animation.c-home__video-container:after {
            block-size: 0;
            transition: block-size 1s ease-out
        }

        .animation.c-home__headline {
            opacity: 0;
            transform: translateX(-2ch);
            transition: transform 1s ease-out, opacity 1s ease-out;
            transition-delay: .25s
        }

        .animation.c-home__headline:before {
            inline-size: 0;
            transition: inline-size 1s ease-out;
            transition-delay: inherit
        }

        .animation.c-home__subheadline-text {
            opacity: 0;
            transform: translateX(80vi);
            transition: transform 1s ease-out, opacity 1s ease-out
        }

        .animation.c-home__subheadline-text:before {
            inline-size: 0;
            transition: inline-size 1s ease-out
        }

        .animation.is-playing.c-home__video-container:after {
            block-size: 100%
        }

        .animation.is-playing.c-home__headline {
            opacity: 1;
            transform: translateX(0)
        }

        .animation.is-playing.c-home__headline:before {
            inline-size: 100%
        }

        .animation.is-playing.c-home__subheadline-text {
            opacity: 1;
            transform: translateX(0)
        }

        .animation.is-playing.c-home__subheadline-text:before {
            inline-size: 100%
        }
    }
}

@layer components {
    .c-mosaic {
        --_headline-size: clamp(var(--font-size-heading-xlarge), var(--font-size-heading-xlarge) * 0.7 + 4vi, var(--font-size-heading-4xlarge));
        background-color: var(--color-surface-container-2);
        color: var(--color-on-surface);
        display: grid;
        min-block-size: 100vb;
        overflow: hidden;
        padding-block: clamp(var(--spacing-64), 4.5vi, var(--spacing-120));
        padding-inline: var(--page-padding-inline);
        place-items: center;
        position: relative
    }

    :has(.c-global-nav) .c-mosaic {
        min-block-size: calc(100vb - var(--global-nav-size))
    }

    :has(.c-sub-navigation) .c-mosaic {
        min-block-size: calc(100vb - var(--global-nav-size) - var(--sub-nav-size))
    }

    :has(.c-hero-edit-mode) .c-mosaic {
        min-block-size: unset !important
    }

    .c-mosaic__content {
        display: grid;
        gap: var(--spacing-16);
        inline-size: 100%;
        max-inline-size: 40rem;
        position: relative;
        text-align: center;
        z-index: var(--z-container-xhigh)
    }

    .c-mosaic__headline {
        display: grid;
        font-family: var(--font-heading) !important;
        font-size: var(--font-size-heading-xlarge);
        font-size: var(--_headline-size);
        font-weight: var(--font-weight-semibold);
        gap: var(--spacing-12);
        justify-items: center;
        line-height: var(--font-line-height-3xtight);
        text-align: center
    }

    .c-mosaic__headline>svg {
        block-size: auto;
        inline-size: 100%;
        max-inline-size: 1.75em
    }

    .c-mosaic__cta-group {
        align-items: center;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-16);
        padding-block: clamp(var(--spacing-32), 4.5vi, var(--spacing-40))
    }

    @media(min-width:1025px) {
        .c-mosaic__cta-group {
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center
        }

        .c-mosaic__cta-group>* {
            white-space: nowrap
        }

        .c-mosaic__cta-group>:last-child {
            flex: 2
        }
    }

    .c-mosaic__image-stack {
        inset: 0;
        position: absolute;
        z-index: var(--z-reset)
    }

    .c-mosaic__image-stack-item {
        aspect-ratio: 4/3;
        inline-size: clamp(15rem, 25vi, 25rem);
        object-fit: cover;
        position: absolute
    }

    .c-mosaic__image-stack-item:nth-child(3),
    .c-mosaic__image-stack-item:nth-child(4) {
        aspect-ratio: 3/4;
        inline-size: clamp(10rem, 25vi, 18rem)
    }

    .c-mosaic__image-stack-item:first-child {
        inset-block-start: 0;
        inset-inline-start: 0;
        rotate: 14deg;
        translate: -50% -75%
    }

    @media(min-width:1025px) {
        .c-mosaic__image-stack-item:first-child {
            translate: 10% -45%
        }
    }

    .c-mosaic__image-stack-item:nth-child(2) {
        inset-block-start: 0;
        inset-inline-end: 0;
        rotate: -13deg;
        translate: 50% -85%
    }

    @media(min-width:1025px) {
        .c-mosaic__image-stack-item:nth-child(2) {
            translate: 15% -60%
        }
    }

    .c-mosaic__image-stack-item:nth-child(3) {
        inset-block-end: 0;
        inset-inline-start: 0;
        rotate: -17deg;
        translate: -90% 0;
        z-index: var(--z-container-high)
    }

    @media(min-width:1025px) {
        .c-mosaic__image-stack-item:nth-child(3) {
            inset-block-end: unset;
            inset-block-start: 50%;
            translate: -60% -30%
        }
    }

    .c-mosaic__image-stack-item:nth-child(4) {
        inset-block-end: 0;
        inset-inline-end: 0;
        rotate: 4deg;
        translate: 80% 0
    }

    @media(min-width:1025px) {
        .c-mosaic__image-stack-item:nth-child(4) {
            inset-block-end: unset;
            inset-block-start: 50%;
            translate: 20% -30%
        }
    }

    .c-mosaic__image-stack-item:nth-child(5) {
        inset-block-end: 0;
        inset-inline-start: 0;
        rotate: 4deg;
        translate: 0 50%
    }

    @media(min-width:1025px) {
        .c-mosaic__image-stack-item:nth-child(5) {
            translate: 10% 10%
        }
    }

    .c-mosaic__image-stack-item:nth-child(6) {
        inset-block-end: 0;
        inset-inline-end: 0;
        rotate: -6deg;
        translate: 70% 10%
    }

    @media(min-width:1025px) {
        .c-mosaic__image-stack-item:nth-child(6) {
            translate: 20% 30%
        }
    }

    .c-mosaic__spinning-text {
        display: none;
        inset-block-end: 0;
        inset-inline-start: 0;
        position: absolute;
        transform: translatex(-25%);
        z-index: var(--z-container-xhigh)
    }

    .c-mosaic__spinning-text--static,
    .c-mosaic__spinning-text>img {
        display: block
    }

    @media(prefers-reduced-motion:no-preference) {
        .c-mosaic__spinning-text {
            display: block
        }

        .c-mosaic__spinning-text--static {
            display: none
        }

        .animation.c-mosaic .c-mosaic__content {
            opacity: 0;
            transition: opacity 1.5s cubic-bezier(.26, .29, 0, 1);
            transition-delay: .5s
        }

        .animation.c-mosaic .c-mosaic__image-stack-item {
            inset: 50%;
            transition: all 1.5s cubic-bezier(.26, .29, 0, 1);
            translate: -50% -50%
        }

        .animation.is-playing.c-mosaic .c-mosaic__content {
            opacity: 1
        }

        .animation.is-playing.c-mosaic .c-mosaic__image-stack-item {
            inset: unset;
            translate: unset
        }

        .animation.is-playing.c-mosaic .c-mosaic__image-stack-item:first-child {
            inset-block-start: 0;
            inset-inline-start: 0;
            rotate: 14deg;
            translate: -50% -75%
        }
    }

    @media(prefers-reduced-motion:no-preference)and (min-width:1025px) {
        .animation.is-playing.c-mosaic .c-mosaic__image-stack-item:first-child {
            translate: 10% -45%
        }
    }

    @media(prefers-reduced-motion:no-preference) {
        .animation.is-playing.c-mosaic .c-mosaic__image-stack-item:nth-child(2) {
            inset-block-start: 0;
            inset-inline-end: 0;
            rotate: -13deg;
            translate: 50% -85%
        }
    }

    @media(prefers-reduced-motion:no-preference)and (min-width:1025px) {
        .animation.is-playing.c-mosaic .c-mosaic__image-stack-item:nth-child(2) {
            translate: 15% -60%
        }
    }

    @media(prefers-reduced-motion:no-preference) {
        .animation.is-playing.c-mosaic .c-mosaic__image-stack-item:nth-child(3) {
            inset-block-end: 0;
            inset-inline-start: 0;
            rotate: -17deg;
            translate: -90% 0;
            z-index: var(--z-container-high)
        }
    }

    @media(prefers-reduced-motion:no-preference)and (min-width:1025px) {
        .animation.is-playing.c-mosaic .c-mosaic__image-stack-item:nth-child(3) {
            inset-block-end: unset;
            inset-block-start: 50%;
            translate: -60% -30%
        }
    }

    @media(prefers-reduced-motion:no-preference) {
        .animation.is-playing.c-mosaic .c-mosaic__image-stack-item:nth-child(4) {
            inset-block-end: 0;
            inset-inline-end: 0;
            rotate: 4deg;
            translate: 80% 0
        }
    }

    @media(prefers-reduced-motion:no-preference)and (min-width:1025px) {
        .animation.is-playing.c-mosaic .c-mosaic__image-stack-item:nth-child(4) {
            inset-block-end: unset;
            inset-block-start: 50%;
            translate: 20% -30%
        }
    }

    @media(prefers-reduced-motion:no-preference) {
        .animation.is-playing.c-mosaic .c-mosaic__image-stack-item:nth-child(5) {
            inset-block-end: 0;
            inset-inline-start: 0;
            rotate: 4deg;
            translate: 0 50%
        }
    }

    @media(prefers-reduced-motion:no-preference)and (min-width:1025px) {
        .animation.is-playing.c-mosaic .c-mosaic__image-stack-item:nth-child(5) {
            translate: 10% 10%
        }
    }

    @media(prefers-reduced-motion:no-preference) {
        .animation.is-playing.c-mosaic .c-mosaic__image-stack-item:nth-child(6) {
            inset-block-end: 0;
            inset-inline-end: 0;
            rotate: -6deg;
            translate: 70% 10%
        }
    }

    @media(prefers-reduced-motion:no-preference)and (min-width:1025px) {
        .animation.is-playing.c-mosaic .c-mosaic__image-stack-item:nth-child(6) {
            translate: 20% 30%
        }
    }
}

@layer components {
    .c-pillar-a {
        --_headline-size: clamp(var(--font-size-heading-large), var(--font-size-heading-large) * 0.7 + 3vi, var(--font-size-heading-4xlarge));
        --_headline-line-height: calc(4rem + 4vi);
        --_image-inline-size: 100%;
        --_image-aspect-ratio: 4/3;
        display: grid;
        gap: var(--spacing-32);
        inline-size: 100vi;
        margin-inline-start: calc(50% - 50vi);
        padding-block: var(--module-padding-block)
    }

    .c-pillar-a__logo,
    .c-pillar-a__lw {
        padding-inline: var(--page-padding-inline)
    }

    @media(min-width:1025px) {
        .c-pillar-a {
            --_headline-line-height: clamp(6rem, (5rem + 1.75vi), 9rem);
            --_image-inline-size: 30rem;
            --_image-aspect-ratio: unset;
            position: relative
        }

        .c-pillar-a__logo,
        .c-pillar-a__lw {
            padding-inline-end: calc(var(--_image-inline-size) + var(--page-padding-inline) + var(--spacing-32))
        }

        .c-pillar-a__image-wrapper {
            inset-block: 0;
            inset-inline-end: 0;
            padding-block: calc(var(--module-padding-block)/2);
            position: absolute
        }

        .c-pillar-a .c-pillar__image {
            block-size: 100%;
            max-block-size: calc(100vb - var(--module-padding-block)*2);
            min-block-size: 20rem
        }
    }

    .c-pillar-a__logo {
        border-bottom: 1px solid;
        display: block;
        padding-block-end: var(--spacing-40)
    }

    .c-pillar-a__logo svg {
        block-size: clamp(1.45rem, 4.5vi, 2.375rem);
        inline-size: auto
    }

    .c-pillar-a__lw {
        display: grid;
        line-height: 1
    }

    .c-pillar-a__lw p {
        font-size: var(--font-size-heading-small);
        line-height: var(--font-line-height);
        padding-block-end: var(--spacing-40)
    }

    .c-pillar-a__headline-text {
        display: grid;
        font-family: var(--font-heading) !important;
        font-size: var(--font-size-heading-4xlarge);
        font-size: var(--_headline-size);
        font-weight: var(--font-weight);
        line-height: var(--font-line-height-3xtight);
        line-height: var(--font-line-height-2xtight);
        margin-block-end: var(--spacing-24);
        margin-block-start: var(--spacing-40)
    }

    .c-pillar-a__headline {
        display: grid;
        line-height: 1
    }

    .c-pillar-a__image-wrapper .c-pillar__image {
        aspect-ratio: var(--_image-aspect-ratio);
        display: block;
        inline-size: var(--_image-inline-size);
        object-fit: cover
    }

    .c-image-grid-card {
        background-color: var(--color-surface-container-1);
        block-size: 100%;
        color: var(--color-on-surface);
        display: flex;
        flex-direction: column;
        gap: clamp(var(--spacing-40), 3.35vi, var(--spacing-48));
        padding: clamp(var(--spacing-24), 3.35vi, var(--spacing-48));
        transition: background-color var(--easing)
    }
}

@layer components {
    @media(hover:hover)and (prefers-reduced-motion:no-preference) {
        .c-image-grid-card:hover .c-image-grid-card__image {
            transform: scale(1.2)
        }
    }

    .c-image-grid-card__image-wrapper {
        aspect-ratio: 1/1;
        order: 1;
        overflow: hidden
    }

    .c-image-grid-card__image {
        aspect-ratio: 1/1;
        display: block;
        inline-size: 100%;
        object-fit: cover;
        transition: transform var(--easing)
    }

    .c-image-grid-card__content {
        display: grid;
        gap: var(--spacing-16);
        order: 2
    }

    .c-image-grid-card__eyebrow {
        font-family: var(--font-body) !important;
        font-size: var(--font-size-eyebrow-small);
        font-weight: var(--font-weight);
        letter-spacing: var(--font-letter-spacing-loose);
        line-height: var(--font-line-height-3xtight);
        text-transform: uppercase
    }

    @media(min-width:769px) {
        .c-image-grid-card__eyebrow {
            font-family: var(--font-body) !important;
            font-size: var(--font-size-eyebrow-large);
            font-weight: var(--font-weight);
            letter-spacing: var(--font-letter-spacing-loose);
            line-height: var(--font-line-height-3xtight);
            text-transform: uppercase
        }
    }

    .c-image-grid-card__description {
        font-family: var(--font-heading-variant) !important;
        font-size: var(--font-size-heading-xsmall);
        font-weight: var(--font-weight-semibold);
        line-height: var(--font-line-height-xtight)
    }

    @media(min-width:769px) {
        .c-image-grid-card__description {
            font-family: var(--font-heading-variant) !important;
            font-size: var(--font-size-heading-small);
            font-weight: var(--font-weight);
            line-height: var(--font-line-height-xtight)
        }
    }
}

@layer components {
    .c-image-grid__header {
        border-block-end: 1px solid var(--color-on-surface);
        padding-block-end: var(--spacing-48);
        padding-block-start: var(--module-padding-block);
        padding-inline: var(--page-padding-inline)
    }

    .c-image-grid__heading {
        font-family: var(--font-heading) !important;
        font-size: var(--font-size-heading-medium);
        font-size: clamp(var(--font-size-heading-medium), var(--font-size-heading-medium)*.7 + 4vi, var(--font-size-heading-xlarge));
        font-weight: var(--font-weight);
        line-height: var(--font-line-height-xtight)
    }

    .c-image-grid__content {
        --_card-min-inline-size: 25ch;
        border-inline: 1px solid var(--color-outline);
        display: grid;
        gap: 1px;
        grid-template-columns: repeat(auto-fit, minmax(var(--_card-min-inline-size), 1fr));
        list-style: none;
        margin-inline: var(--page-padding-inline)
    }

    @media(min-width:77.5em) {
        .c-image-grid__content {
            --_card-min-inline-size: 32ch
        }
    }

    .c-image-grid__content>* {
        border-block-end: 1px solid var(--color-outline);
        border-inline-end: 1px solid var(--color-outline);
        margin-block-end: -1px;
        margin-inline-end: -1px
    }

    .c-image-grid__cta {
        border-block-start: 1px solid var(--color-on-surface);
        display: flex;
        justify-content: center;
        padding-block-end: var(--module-padding-block);
        padding-block-start: var(--spacing-48);
        padding-inline: var(--page-padding-inline)
    }

    .c-image-grid-card {
        background-color: var(--color-surface-container-1);
        block-size: 100%;
        color: var(--color-on-surface);
        display: flex;
        flex-direction: column;
        gap: clamp(var(--spacing-40), 3.35vi, var(--spacing-48));
        padding: clamp(var(--spacing-24), 3.35vi, var(--spacing-48));
        transition: background-color var(--easing)
    }
}

@layer components {
    @media(hover:hover)and (prefers-reduced-motion:no-preference) {
        .c-image-grid-card:hover .c-image-grid-card__image {
            transform: scale(1.2)
        }
    }

    .c-image-grid-card__image-wrapper {
        aspect-ratio: 1/1;
        order: 1;
        overflow: hidden
    }

    .c-image-grid-card__image {
        aspect-ratio: 1/1;
        display: block;
        inline-size: 100%;
        object-fit: cover;
        transition: transform var(--easing)
    }

    .c-image-grid-card__content {
        display: grid;
        gap: var(--spacing-16);
        order: 2
    }

    .c-image-grid-card__eyebrow {
        font-family: var(--font-body) !important;
        font-size: var(--font-size-eyebrow-small);
        font-weight: var(--font-weight);
        letter-spacing: var(--font-letter-spacing-loose);
        line-height: var(--font-line-height-3xtight);
        text-transform: uppercase
    }

    @media(min-width:769px) {
        .c-image-grid-card__eyebrow {
            font-family: var(--font-body) !important;
            font-size: var(--font-size-eyebrow-large);
            font-weight: var(--font-weight);
            letter-spacing: var(--font-letter-spacing-loose);
            line-height: var(--font-line-height-3xtight);
            text-transform: uppercase
        }
    }

    .c-image-grid-card__description {
        font-family: var(--font-heading-variant) !important;
        font-size: var(--font-size-heading-xsmall);
        font-weight: var(--font-weight-semibold);
        line-height: var(--font-line-height-xtight)
    }

    @media(min-width:769px) {
        .c-image-grid-card__description {
            font-family: var(--font-heading-variant) !important;
            font-size: var(--font-size-heading-small);
            font-weight: var(--font-weight);
            line-height: var(--font-line-height-xtight)
        }
    }

    .c-image-grid-card__fulldescription {
        font-family: var(--font-body) !important;
        font-size: var(--font-size-eyebrow-small);
        font-weight: var(--font-weight);
        letter-spacing: var(--font-letter-spacing-loose);
        line-height: var(--font-line-height-3xtight);
        line-height: var(--font-line-height-tight);
        text-transform: uppercase;
        text-transform: none
    }

    @media(min-width:769px) {
        .c-image-grid-card__fulldescription {
            font-family: var(--font-body) !important;
            font-size: var(--font-size-eyebrow-large);
            font-weight: var(--font-weight);
            letter-spacing: var(--font-letter-spacing-loose);
            line-height: var(--font-line-height-3xtight);
            line-height: var(--font-line-height-tight);
            text-transform: uppercase;
            text-transform: none
        }
    }
}

@layer components {
    .c-info-card-module {
        border-block: 1px solid var(--color-outline-variant);
        container: infocards/inline-size;
        display: grid;
        gap: var(--spacing-64);
        inline-size: 100vi;
        margin-inline-start: calc(50% - 50vi);
        padding-block: var(--module-padding-block);
        padding-inline: var(--page-padding-inline)
    }

    @media(min-width:769px) {
        .c-info-card-module {
            border-block: 0;
            padding-block: 0
        }

        .c-info-card-module>:first-child {
            border-block-start: 1px solid var(--color-outline-variant);
            padding-block-start: var(--module-padding-block)
        }

        .c-info-card-module>:last-child {
            border-block-end: 1px solid var(--color-outline-variant);
            padding-block-end: var(--module-padding-block)
        }
    }

    .c-info-card-module__header {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: var(--gutter);
        justify-content: space-between;
        row-gap: var(--spacing-24)
    }

    .c-info-card-module__title {
        font-family: var(--font-heading) !important;
        font-size: var(--font-size-heading-xlarge);
        font-size: clamp(var(--font-size-heading-medium), var(--font-size-heading-medium)*.7 + 4vi, var(--font-size-heading-xlarge));
        font-weight: var(--font-weight);
        line-height: var(--font-line-height-xtight)
    }

    .c-info-card-module__content {
        display: grid;
        gap: var(--spacing-24);
        grid-template-columns: repeat(auto-fit, minmax(30, 1fr));
        list-style: none;
        row-gap: var(--spacing-56)
    }

    @container infocards (min-width: 60ch) {

        .c-info-card-module__content:has(>li:nth-of-type(4)),
        .c-info-card-module__content:not(:has(>li:nth-of-type(3))) {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    @container infocards (min-width: 75ch) {
        .c-info-card-module__content:has(>li:nth-of-type(3)) {
            grid-template-columns: repeat(3, 1fr)
        }

        .c-info-card-module__content:has(>li:nth-of-type(4)) {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    @container infocards (min-width: 100ch) {
        .c-info-card-module__content:has(>li:nth-of-type(4)) {
            grid-template-columns: repeat(4, 1fr)
        }
    }

    @container infocards (min-width: 140ch) {
        .c-info-card-module__content:has(>li:nth-of-type(5)) {
            grid-template-columns: repeat(auto-fit, minmax(25ch, 1fr))
        }
    }

    .c-info-card-module[data-theme^=toefl],
    [data-theme^=toefl] .c-info-card-module {
        gap: var(--spacing-40)
    }

    .c-info-card-module[data-theme^=toefl] .c-info-card-module__content,
    [data-theme^=toefl] .c-info-card-module .c-info-card-module__content {
        gap: var(--spacing-40);
        position: relative;
        row-gap: var(--spacing-32)
    }

    @media(min-width:769px) {

        .c-info-card-module[data-theme^=toefl] .c-info-card-module__content,
        [data-theme^=toefl] .c-info-card-module .c-info-card-module__content {
            border-block-end: 0
        }

        .c-info-card-module[data-theme^=toefl] .c-info-card-module__content:after,
        [data-theme^=toefl] .c-info-card-module .c-info-card-module__content:after {
            background-color: var(--color-outline);
            block-size: 1px;
            content: "";
            inset-block-end: 0;
            inset-inline: calc(var(--page-padding-inline)*-1);
            position: absolute
        }
    }

    .c-info-card-module[data-theme^=toefl] .c-info-card-module__title,
    [data-theme^=toefl] .c-info-card-module .c-info-card-module__title {
        font-family: var(--font-body) !important;
        font-size: var(--font-size-eyebrow-small);
        font-weight: var(--font-weight);
        letter-spacing: var(--font-letter-spacing-loose);
        line-height: var(--font-line-height-3xtight);
        text-transform: uppercase
    }

    .c-info-card {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-12);
        min-block-size: 100%;
        position: relative
    }

    .c-info-card__title {
        text-wrap: pretty;
        font-family: var(--font-heading-variant) !important;
        font-size: var(--font-size-heading-xsmall);
        font-weight: var(--font-weight-semibold);
        line-height: var(--font-line-height-xtight)
    }

    .c-info-card__title>a {
        color: inherit;
        display: block;
        text-decoration: none
    }

    .c-info-card__title>a:before {
        content: "";
        inset: 0;
        position: absolute
    }
}

@layer components {
    @media(hover:hover) {
        .c-info-card__title>a:hover {
            text-decoration: underline;
            text-underline-offset: .1em
        }
    }

    .c-info-card__description {
        font-family: var(--font-body) !important;
        font-size: var(--font-size-small);
        font-weight: var(--font-weight);
        line-height: var(--font-line-height)
    }

    .c-info-card__image {
        aspect-ratio: 3/2;
        display: block;
        inline-size: 100%;
        object-fit: cover
    }

    .c-info-card__cta {
        align-items: center;
        color: inherit;
        display: flex;
        font-family: var(--font-body) !important;
        font-size: var(--font-size-eyebrow-small);
        font-weight: var(--font-weight-semibold);
        letter-spacing: var(--font-letter-spacing-loose);
        line-height: var(--font-line-height-3xtight);
        margin-block-start: auto;
        text-decoration: none;
        text-transform: uppercase
    }

    .c-info-card__cta svg {
        --icon-size: 1.75em
    }

    [data-theme^=toefl] .c-info-card__title {
        font-family: var(--font-heading) !important;
        font-size: var(--font-size-heading-small);
        font-size: clamp(var(--font-size-heading-small), var(--font-size-heading-small)*.7 + 2vi, var(--font-size-heading-xlarge));
        font-weight: var(--font-weight-semibold);
        line-height: var(--font-line-height-3xtight)
    }

    .c-input {
        display: flex;
        flex-direction: column;
        padding-block-end: var(--spacing-24);
        position: relative
    }

    .c-input input {
        background-color: transparent;
        border: none;
        border-block-end: 1px solid var(--color-outline);
        color: inherit;
        inline-size: 100%;
        padding-block-end: var(--spacing-12);
        padding-block-start: var(--spacing-20)
    }
}

@layer components {
    .c-input input:not(:placeholder-shown)+label {
        font-family: var(--font-body) !important;
        font-size: var(--font-size-small);
        font-weight: var(--font-weight);
        inset-block-start: 0;
        line-height: var(--font-line-height)
    }

    .c-input input.c-input--touched:not(:focus):invalid {
        border-block-end-color: var(--color-error)
    }

    .c-input input.c-input--touched:not(:focus):invalid+label {
        color: var(--color-error);
        padding-inline-end: var(--spacing-24)
    }

    .c-input input.c-input--touched:not(:focus):invalid~.c-input__error-icon {
        --icon-color: var(--color-error);
        display: block
    }

    .c-input input.c-input--touched:not(:focus):invalid~.c-input__error-message {
        color: var(--color-error);
        display: block;
        font-family: var(--font-body) !important;
        font-size: var(--font-size-small);
        font-weight: var(--font-weight);
        inset-block-end: 0;
        line-height: var(--font-line-height);
        position: absolute
    }

    .c-input input.c-input--touched:valid~.c-input__valid-icon {
        display: block
    }

    .c-input label {
        cursor: auto;
        font-family: var(--font-body) !important;
        font-size: var(--font-size-large);
        font-weight: var(--font-weight);
        hyphens: auto;
        inline-size: 100%;
        inset-block-end: 2rem;
        line-height: var(--font-line-height);
        position: absolute;
        word-break: break-word
    }

    .c-input__error-icon,
    .c-input__valid-icon {
        display: none;
        inset-block-end: 2rem;
        inset-inline-end: 0;
        position: absolute
    }

    .c-input__error-message {
        color: var(--color-error);
        display: none;
        font-family: var(--font-body) !important;
        font-size: var(--font-size-small);
        font-weight: var(--font-weight);
        inset-block-end: 0;
        line-height: var(--font-line-height);
        position: absolute
    }

    .c-lead-gen-breaker {
        background-size: cover;
        display: grid;
        padding-block: var(--module-padding-block);
        padding-inline: var(--page-padding-inline)
    }
}

@layer components {
    @media(min-width:1025px) {
        .c-lead-gen-breaker {
            grid-template-columns: 1fr 2fr
        }
    }

    .c-lead-gen-breaker__heading {
        border-block-end: 1px solid var(--color-outline-dim);
        font-family: var(--font-heading) !important;
        font-size: var(--font-size-heading-xlarge);
        font-size: clamp(var(--font-size-heading-medium), var(--font-size-heading-medium)*.75 + 1vi, var(--font-size-heading-xlarge));
        font-weight: var(--font-weight);
        line-height: var(--font-line-height-xtight);
        padding-block-end: var(--spacing-16)
    }

    @media(min-width:1025px) {
        .c-lead-gen-breaker__heading {
            border-block-end: 0;
            border-inline-end: 1px solid var(--color-outline-dim);
            padding-block-end: 0;
            padding-inline-end: clamp(var(--spacing-32), 8vi, var(--spacing-120))
        }
    }

    .c-lead-gen-breaker__content {
        display: grid;
        gap: var(--spacing-32);
        padding-block-start: var(--spacing-24)
    }

    @media(min-width:1025px) {
        .c-lead-gen-breaker__content {
            padding-block-start: 0;
            padding-inline-start: clamp(var(--spacing-32), 8vi, var(--spacing-120))
        }
    }
}

@layer components {
    .c-lead-gen-form-modal {
        background-color: var(--color-surface);
        display: grid
    }

    @media(min-width:1025px) {
        .c-lead-gen-form-modal {
            grid-template-columns: 40% 1fr
        }
    }

    .c-lead-gen-form-modal>img {
        aspect-ratio: 3/2;
        inline-size: 100%
    }

    @media(min-width:1025px) {
        .c-lead-gen-form-modal>img {
            block-size: 100%;
            object-fit: cover
        }
    }

    .c-lead-gen-form-modal__content {
        display: flex;
        flex-direction: column;
        padding-block-start: var(--spacing-32);
        padding-inline: var(--page-padding-inline)
    }

    @media(min-width:1025px) {
        .c-lead-gen-form-modal__content {
            padding-block: var(--spacing-56);
            padding-inline: var(--spacing-80)
        }
    }

    .c-lead-gen-form-modal__error-summary {
        border: 2px solid var(--color-error);
        color: var(--color-error);
        font-family: var(--font-heading-variant) !important;
        font-size: var(--font-size-heading-small);
        font-weight: var(--font-weight-semibold);
        line-height: var(--font-line-height-xtight);
        margin-block-end: var(--spacing-24);
        padding-block: var(--spacing-24);
        padding-inline: var(--spacing-24)
    }

    @media(min-width:1025px) {
        .c-lead-gen-form-modal__error-summary {
            margin-block-end: var(--spacing-40)
        }
    }

    .c-lead-gen-form-modal__error-summary ul {
        margin-block-start: var(--spacing-20);
        padding-inline-start: var(--spacing-32)
    }

    .c-lead-gen-form-modal__error-summary a {
        color: inherit;
        font-family: var(--font-body) !important;
        font-size: var(--font-size-medium);
        font-weight: var(--font-weight);
        line-height: var(--font-line-height)
    }

    .c-lead-gen-form-modal__error-summary-header {
        align-items: baseline;
        display: flex;
        font-family: var(--font-heading-variant) !important;
        font-size: var(--font-size-heading-xsmall);
        font-weight: var(--font-weight-semibold);
        gap: var(--spacing-8);
        line-height: var(--font-line-height-xtight)
    }

    .c-lead-gen-form-modal__error-summary-header svg {
        --icon-size: var(--spacing-16);
        min-inline-size: var(--icon-size)
    }

    .c-lead-gen-form-modal__heading {
        font-family: var(--font-heading) !important;
        font-size: var(--font-size-heading-small);
        font-weight: var(--font-weight);
        line-height: var(--font-line-height);
        margin-block-end: var(--spacing-16)
    }

    @media(min-width:1025px) {
        .c-lead-gen-form-modal__heading {
            font-family: var(--font-heading) !important;
            font-size: var(--font-size-heading-xlarge);
            font-weight: var(--font-weight);
            line-height: var(--font-line-height-xtight);
            margin-block-end: var(--spacing-20)
        }
    }

    .c-lead-gen-form-modal__description {
        font-family: var(--font-body) !important;
        font-size: var(--font-size-small);
        font-weight: var(--font-weight);
        line-height: var(--font-line-height)
    }

    .c-lead-gen-form-modal__form {
        margin-block-start: var(--spacing-20)
    }

    @media(min-width:1025px) {
        .c-lead-gen-form-modal__form {
            margin-block-start: var(--spacing-48)
        }
    }

    .c-lead-gen-form-modal__input-container {
        column-gap: var(--spacing-32);
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        row-gap: var(--spacing-8)
    }

    .c-lead-gen-form-modal__input-container>li {
        flex: 1 1 25ch
    }

    .c-lead-gen-form-modal__input {
        flex-basis: 100%
    }

    @media(min-width:1025px) {

        .c-lead-gen-form-modal__input:first-child,
        .c-lead-gen-form-modal__input:nth-child(2) {
            flex-basis: auto;
            flex-grow: 1
        }
    }

    .c-lead-gen-form-modal__cta-container {
        background-color: var(--color-surface);
        border-block-start: 1px solid var(--brand-taupe);
        inset-block-end: 0;
        inset-inline: 0;
        margin-block-start: var(--spacing-24);
        margin-inline: calc(var(--page-padding-inline)*-1);
        padding-block: var(--spacing-24);
        padding-inline: var(--page-padding-inline);
        position: sticky
    }

    @media(min-width:1025px) {
        .c-lead-gen-form-modal__cta-container {
            border: none;
            margin-inline: 0;
            padding-inline: 0;
            position: static
        }
    }

    .c-lead-gen-form-modal__cta {
        display: block;
        inline-size: 100%;
        max-inline-size: 100%;
        text-align: center
    }

    @media(min-width:1025px) {
        .c-lead-gen-form-modal__cta {
            max-inline-size: max-content
        }
    }
}

@layer components {
    .c-map {
        align-items: center;
        display: flex;
        flex-direction: column;
        margin-block: 0;
        margin-inline: auto;
        padding-block: var(--module-padding-block);
        padding-inline: var(--page-padding-inline)
    }

    @media(min-width:1025px) {
        .c-map {
            isolation: isolate;
            padding-block: var(--spacing-32)
        }
    }

    .c-map__image {
        margin-block: var(--spacing-32)
    }

    @media(min-width:1025px) {
        .c-map__image {
            margin-block: 0
        }
    }

    .c-map__image-container {
        max-inline-size: 30rem;
        position: relative;
        text-align: center
    }

    @media(min-width:1025px) {
        .c-map__image-container {
            max-inline-size: unset
        }
    }

    .c-map__text-container {
        align-items: center;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-24)
    }

    @media(min-width:1025px) {
        .c-map__text-container {
            align-items: flex-start;
            display: flex;
            flex-direction: column;
            inline-size: 25ch;
            inset-block-end: 0;
            inset-inline-start: 0;
            margin: 0;
            position: absolute;
            z-index: var(--z-container-high)
        }
    }

    .c-map__title {
        font-family: var(--font-heading) !important;
        font-size: var(--font-size-heading-medium);
        font-weight: var(--font-weight-semibold);
        line-height: var(--font-line-height-3xtight);
        text-align: center
    }

    @media(min-width:1025px) {
        .c-map__title {
            font-family: var(--font-heading) !important;
            font-size: var(--font-size-heading-xlarge);
            font-weight: var(--font-weight-semibold);
            line-height: var(--font-line-height-3xtight);
            text-align: start
        }
    }

    .c-map__cta {
        gap: var(--spacing-16)
    }

    .c-map__tooltip1-container {
        display: none
    }

    @media(min-width:1025px) {
        .c-map__tooltip1-container {
            block-size: 4.688rem;
            display: block;
            inline-size: 8.75rem;
            inset-block-start: 35%;
            inset-inline-start: 10%;
            position: absolute
        }
    }

    .c-map__tooltip2-container {
        display: none
    }

    @media(min-width:1025px) {
        .c-map__tooltip2-container {
            block-size: 4.688rem;
            display: block;
            inline-size: 8.75rem;
            inset-block-start: 31.5%;
            inset-inline-start: 49.5%;
            position: absolute
        }
    }

    .c-map__tooltip3-container {
        display: none
    }

    @media(min-width:1025px) {
        .c-map__tooltip3-container {
            block-size: 4.688rem;
            display: block;
            inline-size: 8.75rem;
            inset-block-start: 40%;
            inset-inline-end: 18.5%;
            position: absolute
        }
    }

    .c-map__tooltip4-container {
        display: none
    }

    @media(min-width:1025px) {
        .c-map__tooltip4-container {
            block-size: 4.688rem;
            display: block;
            inline-size: 8.75rem;
            inset-block-end: 25%;
            inset-inline-start: 25%;
            position: absolute
        }
    }

    .c-map__tooltip5-container {
        display: none
    }

    @media(min-width:1025px) {
        .c-map__tooltip5-container {
            block-size: 4.688rem;
            display: block;
            inline-size: 8.75rem;
            inset-block-end: 30.5%;
            inset-inline-start: 46%;
            position: absolute
        }
    }

    .c-map__tooltip6-container {
        display: none
    }

    @media(min-width:1025px) {
        .c-map__tooltip6-container {
            block-size: 4.688rem;
            display: block;
            inline-size: 8.75rem;
            inset-block-end: 18%;
            inset-inline-end: 10%;
            position: absolute
        }
    }

    .c-map__tooltip-text-container {
        background-color: var(--brand-toefl-highlighter-orange);
        border: 1px solid var(--brand-ink);
        display: flex;
        flex-direction: column;
        gap: .5rem;
        padding: .625rem;
        position: relative;
        text-align: left
    }

    @media(min-width:1025px) {
        .c-map__tooltip-text-container {
            block-size: fit-content;
            display: flex;
            flex-direction: column;
            inline-size: fit-content;
            justify-content: center;
            padding: var(--spacing-12);
            position: relative
        }
    }

    .c-map__tooltip-text-container:before {
        display: none
    }

    @media(min-width:1025px) {
        .c-map__tooltip-text-container:before {
            background: linear-gradient(-45deg, var(--brand-toefl-highlighter-orange) 52%, transparent 0);
            border: inherit;
            border-radius: 0 0 2px 0;
            border-width: 0 1px 1px 0;
            bottom: 0;
            content: "";
            display: block;
            height: 15px;
            position: absolute;
            right: 40%;
            transform: translate(-50%, 50%) rotate(45deg) translateZ(0);
            width: 15px
        }
    }

    .c-map__continent {
        font-family: var(--font-heading) !important;
        font-size: var(--font-size-heading-xsmall);
        font-weight: var(--font-weight-semibold);
        line-height: var(--font-line-height-3xtight)
    }

    .c-map__institutions {
        font-family: var(--font-body) !important;
        font-size: var(--font-size-small);
        font-weight: var(--font-weight);
        line-height: var(--font-line-height)
    }

    .c-map__label-container {
        box-sizing: border-box;
        display: inline-grid;
        gap: var(--spacing-16);
        grid-template-columns: auto auto;
        margin-inline: auto;
        position: relative
    }

    @media(min-width:1025px) {
        .c-map__label-container {
            display: none
        }
    }

    .c-map__ellipse {
        background-color: var(--brand-toefl-highlighter-orange);
        block-size: 1.5rem;
        border: 1px solid var(--brand-black);
        border-radius: 100em;
        color: var(--brand-black);
        display: grid;
        inline-size: 1.5rem;
        place-items: center;
        text-align: center
    }

    .c-map__ellipse--on-map {
        position: absolute
    }

    .c-map__ellipse--1 {
        inset-block-start: 60%;
        inset-inline-start: 15%
    }

    @media(min-width:1025px) {
        .c-map__ellipse--1 {
            display: none
        }
    }

    .c-map__ellipse--2 {
        inset-block-start: 55%;
        inset-inline-start: 50%
    }

    @media(min-width:1025px) {
        .c-map__ellipse--2 {
            display: none
        }
    }

    .c-map__ellipse--3 {
        inset-block-start: 59%;
        inset-inline-end: 18%
    }

    @media(min-width:1025px) {
        .c-map__ellipse--3 {
            display: none
        }
    }

    .c-map__ellipse--4 {
        inset-block-end: 17%;
        inset-inline-start: 28%
    }

    @media(min-width:1025px) {
        .c-map__ellipse--4 {
            display: none
        }
    }

    .c-map__ellipse--5 {
        inset-block-end: 22%;
        inset-inline-start: 50%
    }

    @media(min-width:1025px) {
        .c-map__ellipse--5 {
            display: none
        }
    }

    .c-map__ellipse--6 {
        inset-block-end: 18%;
        inset-inline-end: 9%
    }

    @media(min-width:1025px) {
        .c-map__ellipse--6 {
            display: none
        }
    }
}

@layer components {
    .c-modal {
        --_animation-in-settings: 500ms cubic-bezier(0.25, 0, 0.3, 1);
        --_animation-out-settings: 500ms cubic-bezier(0.5, -0.5, 0.1, 1.5);
        --_modal-header-size: 4rem;
        --_modal-block-size: 100dvb;
        background-color: transparent;
        border: none;
        margin-block: auto;
        margin-inline: auto;
        max-block-size: var(--_modal-block-size);
        max-inline-size: 100vi;
        overflow: hidden
    }

    .c-modal svg {
        block-size: var(--icon-size, 1em);
        color: var(--icon-color, inherit);
        inline-size: var(--icon-size, 1em)
    }

    .c-modal svg>* {
        fill: currentcolor
    }

    @media(min-width:769px) {
        .c-modal {
            --_modal-block-size: 90dvb;
            margin-inline: var(--page-padding-inline)
        }
    }

    .c-modal[open] {
        animation: fadein var(--_animation-in-settings)
    }

    @media(prefers-reduced-motion:no-preference) {
        .c-modal[open] {
            animation: slidein var(--_animation-in-settings)
        }
    }

    .c-modal.is-hidden {
        animation: fadeout var(--_animation-out-settings)
    }

    @media(min-width:769px) {
        .c-modal>* {
            margin-inline: var(--spacing-8)
        }
    }

    .c-modal__header {
        align-items: center;
        block-size: var(--_modal-header-size);
        display: flex;
        inset-block-start: 0;
        inset-inline: 0;
        justify-content: flex-end;
        position: sticky
    }

    .c-modal__body {
        border: 1px solid var(--color-outline-dim);
        max-block-size: calc(var(--_modal-block-size) - var(--_modal-header-size));
        overflow: auto
    }

    .c-modal__close-button {
        background-color: transparent;
        block-size: 2rem;
        border: 1px solid var(--brand-white);
        border-radius: 50%;
        color: var(--brand-white);
        display: grid;
        inline-size: 2rem;
        padding: 0;
        place-items: center
    }

    .c-modal::backdrop {
        animation: none;
        background-color: rgba(26, 33, 43, .9);
        inset: 0;
        position: fixed
    }

    .c-modal[open]::backdrop {
        animation: fadein var(--_animation-in-settings)
    }

    .c-modal.is-hidden::backdrop {
        animation: fadeout var(--_animation-out-settings)
    }

    @keyframes fadein {
        0% {
            opacity: 0
        }

        to {
            opacity: 1
        }
    }

    @keyframes fadeout {
        to {
            opacity: 0
        }
    }

    @keyframes slidein {
        0% {
            opacity: 0;
            transform: translateY(50%)
        }

        to {
            opacity: 1;
            transform: translateY(0)
        }
    }
}

@layer components {
    .c-ping-pong-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(auto-fit, 1fr)
    }

    .c-ping-pong-grid__headline {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-24);
        grid-area: 1/1/2/4;
        padding-block: var(--module-padding-block) clamp(var(--spacing-32), 2.5vi, var(--spacing-40));
        padding-inline: var(--page-padding-inline)
    }

    .c-ping-pong-grid__headline h2 {
        font-family: var(--font-heading) !important;
        font-size: var(--font-size-heading-xlarge);
        font-weight: var(--font-weight);
        line-height: var(--font-line-height-xtight)
    }

    .c-ping-pong-grid__headline p {
        font-family: var(--font-body) !important;
        font-size: var(--font-size-large);
        font-weight: var(--font-weight);
        line-height: var(--font-line-height);
        padding-block: var(--spacing-12)
    }

    @media(min-width:769px) {
        .c-ping-pong-grid__headline {
            align-items: center;
            display: grid;
            grid-template-columns: 1fr auto;
            margin-inline: var(--page-padding-inline);
            padding-inline: 0
        }
    }

    [data-theme^=toefl] .c-ping-pong-grid__headline {
        align-items: center;
        display: flex;
        text-align: center
    }

    [data-theme^=toefl] .c-ping-pong-grid__headline h2 {
        font-family: var(--font-heading) !important;
        font-size: var(--font-size-heading-large);
        font-weight: var(--font-weight-semibold);
        line-height: var(--font-line-height-3xtight)
    }

    @media(min-width:769px) {
        [data-theme^=toefl] .c-ping-pong-grid__headline h2 {
            font-family: var(--font-heading) !important;
            font-size: var(--font-size-heading-2xlarge);
            font-weight: var(--font-weight-semibold);
            line-height: var(--font-line-height-3xtight)
        }
    }

    .c-ping-pong-grid__card-wrapper {
        grid-area: 2/1/2/4;
        list-style: none;
        padding-inline: var(--page-padding-inline)
    }

    [data-theme^=toefl] .c-ping-pong-grid__card-wrapper {
        overflow: hidden
    }

    @media(min-width:769px) {
        .c-ping-pong-grid__card-wrapper {
            position: relative
        }

        .c-ping-pong-grid__card-wrapper:before {
            background: linear-gradient(to right, transparent 0, transparent calc(33.33333% - .5px), var(--color-outline-variant) calc(33.33333% - .5px), var(--color-outline-variant) calc(33.33333% + .5px), transparent calc(33.33333% + .5px), transparent calc(66.66667% - .5px), var(--color-outline-variant) calc(66.66667% - .5px), var(--color-outline-variant) calc(66.66667% + .5px), transparent calc(66.66667% + .5px));
            content: "";
            inset-block: 0;
            inset-inline: var(--page-padding-inline);
            pointer-events: none;
            position: absolute;
            z-index: 0
        }

        [data-theme^=toefl] .c-ping-pong-grid__card-wrapper:before {
            display: none
        }
    }

    .c-ping-pong-grid__card-wrapper>li {
        padding-block: var(--module-padding-block)
    }

    .c-ping-pong-grid__card-wrapper>li:first-of-type {
        border-block-start: 1px solid var(--color-outline-variant)
    }

    .c-ping-pong-grid__card-wrapper>li+li {
        padding-block-start: 0
    }

    .c-ping-pong-grid__card-wrapper>* {
        position: relative
    }

    .c-ping-pong-card {
        --_headline-size: clamp(var(--font-size-heading-medium), var(--font-size-heading-medium) * 0.7 + 4vi, var(--font-size-heading-large));
        --_text-size: clamp(var(--font-size-text-small), var(--font-size-text-small) * 0.7 + 4vi, var(--font-size-text-medium));
        display: grid;
        gap: var(--spacing-40);
        grid-template-columns: repeat(3, 1fr)
    }

    [data-theme^=toefl] .c-ping-pong-card {
        background-color: var(--color-surface)
    }
}

@layer components {
    @media(max-width:767px) {
        .c-ping-pong-card {
            display: flex;
            flex-direction: column-reverse;
            gap: 0
        }
    }

    [data-theme^=toefl] .c-ping-pong-card {
        display: flex;
        flex-direction: column
    }

    @media(min-width:1025px) {
        [data-theme^=toefl] .c-ping-pong-card {
            flex-direction: row
        }
    }

    .c-ping-pong-card__content {
        display: flex;
        flex-direction: column;
        gap: clamp(var(--spacing-40), 4.5vi, var(--spacing-64));
        grid-area: 1/1/2/2;
        margin-block-start: clamp(var(--spacing-16), 4.5vi, var(--spacing-64));
        max-inline-size: 20rem
    }

    @media(min-width:1025px) {
        .c-ping-pong-card__content {
            margin-block-start: 0
        }
    }

    [data-theme^=toefl] .c-ping-pong-card__content {
        flex: 1;
        gap: 0;
        margin-block-start: unset;
        max-inline-size: none;
        padding-block-end: var(--spacing-48)
    }

    @media(min-width:1025px) {
        [data-theme^=toefl] .c-ping-pong-card__content {
            align-self: center;
            padding-block-end: unset;
            padding-inline-end: clamp(var(--spacing-20), 4vi, var(--spacing-80))
        }
    }

    .c-ping-pong-card__content h1,
    .c-ping-pong-card__content h2,
    .c-ping-pong-card__content h3,
    .c-ping-pong-card__content h4,
    .c-ping-pong-card__content h5,
    .c-ping-pong-card__content h6 {
        text-wrap: balance;
        font-family: var(--font-heading) !important;
        font-size: var(--font-size-heading-large);
        font-size: var(--_headline-size);
        font-weight: var(--font-weight);
        line-height: var(--font-line-height-xtight)
    }

    [data-theme^=toefl] .c-ping-pong-card__content h1,
    [data-theme^=toefl] .c-ping-pong-card__content h2,
    [data-theme^=toefl] .c-ping-pong-card__content h3,
    [data-theme^=toefl] .c-ping-pong-card__content h4,
    [data-theme^=toefl] .c-ping-pong-card__content h5,
    [data-theme^=toefl] .c-ping-pong-card__content h6 {
        font-family: var(--font-heading) !important;
        font-size: var(--font-size-heading-large);
        font-weight: var(--font-weight-semibold);
        line-height: var(--font-line-height-3xtight)
    }

    @media(min-width:1025px) {

        [data-theme^=toefl] .c-ping-pong-card__content h1,
        [data-theme^=toefl] .c-ping-pong-card__content h2,
        [data-theme^=toefl] .c-ping-pong-card__content h3,
        [data-theme^=toefl] .c-ping-pong-card__content h4,
        [data-theme^=toefl] .c-ping-pong-card__content h5,
        [data-theme^=toefl] .c-ping-pong-card__content h6 {
            font-family: var(--font-heading) !important;
            font-size: var(--font-size-heading-3xlarge);
            font-weight: var(--font-weight-semibold);
            line-height: var(--font-line-height-3xtight)
        }
    }

    .c-ping-pong-card__content p {
        font-family: var(--font-body) !important;
        font-size: var(--font-size-medium);
        font-size: var(--_text-size);
        font-weight: var(--font-weight);
        line-height: var(--font-line-height)
    }

    .c-ping-pong-card__content h3,
    .c-ping-pong-card__content p {
        padding-block: var(--spacing-12)
    }

    .c-ping-pong-card__cta-group {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-16)
    }

    .c-ping-pong-card__media-wrapper {
        align-self: center;
        grid-area: 1/2/2/4;
        justify-self: flex-end;
        max-inline-size: 40rem;
        position: relative
    }

    @media(min-width:1025px) {
        .c-ping-pong-card__media-wrapper {
            margin-inline-start: var(--spacing-16)
        }
    }

    [data-theme^=toefl] .c-ping-pong-card__media-wrapper {
        aspect-ratio: 1/1;
        flex: 1;
        margin-inline-start: 0;
        min-block-size: 17.85rem
    }

    @media(min-width:1025px) {
        [data-theme^=toefl] .c-ping-pong-card__media-wrapper {
            align-self: flex-start
        }
    }

    .c-ping-pong-card__media-wrapper img {
        aspect-ratio: 3/2;
        display: block;
        inline-size: 100%;
        object-fit: cover
    }

    [data-theme^=toefl] .c-ping-pong-card__media-wrapper img:first-child {
        block-size: 11.02775rem;
        inline-size: 12.32363rem;
        inset-block-start: .89rem;
        inset-inline-end: 0;
        object-fit: cover;
        position: absolute;
        transform: rotate(-7.518deg)
    }

    [data-theme^=toefl] .c-ping-pong-card__media-wrapper img:nth-child(2) {
        block-size: 13.07794rem;
        inline-size: 8.66275rem;
        inset-block-start: 2.18rem;
        inset-inline-end: 5.84rem;
        object-fit: cover;
        position: absolute
    }

    [data-theme^=toefl] .c-ping-pong-card__media-wrapper img:nth-child(3) {
        block-size: 7.1195rem;
        inline-size: 8.88556rem;
        inset-block-start: .88rem;
        inset-inline-end: 9.95rem;
        object-fit: cover;
        position: absolute;
        transform: rotate(-4.787deg)
    }

    [data-theme^=toefl] .c-ping-pong-card__media-wrapper img:nth-child(4) {
        block-size: 14.01731rem;
        inline-size: 9.32219rem;
        inset-block-start: .89rem;
        inset-inline-end: 1.41rem;
        object-fit: cover;
        position: absolute;
        transform: rotate(-6.33deg)
    }

    @media(min-width:1025px) {
        [data-theme^=toefl] .c-ping-pong-card__media-wrapper img:first-child {
            block-size: 22.45256rem;
            inline-size: 25.091rem;
            inset-block-start: 1.06rem;
            inset-inline-end: 2.95rem;
            object-fit: cover;
            position: absolute;
            transform: rotate(-7.518deg)
        }

        [data-theme^=toefl] .c-ping-pong-card__media-wrapper img:nth-child(2) {
            block-size: 26.59775rem;
            inline-size: 17.73188rem;
            inset-block-start: 3.69rem;
            inset-inline-end: 14.78rem;
            object-fit: cover;
            position: absolute
        }

        [data-theme^=toefl] .c-ping-pong-card__media-wrapper img:nth-child(3) {
            block-size: 14.49531rem;
            inline-size: 18.09106rem;
            inset-block-start: 1.03rem;
            inset-inline-end: 23.14rem;
            object-fit: cover;
            position: absolute;
            transform: rotate(-4.787deg)
        }

        [data-theme^=toefl] .c-ping-pong-card__media-wrapper img:nth-child(4) {
            block-size: 28.53931rem;
            inline-size: 18.98rem;
            inset-block-start: 1.06rem;
            inset-inline-end: 5.81rem;
            object-fit: cover;
            position: absolute;
            transform: rotate(-6.33deg)
        }
    }

    .c-ping-pong-card--left .c-ping-pong-card__content {
        grid-area: 1/3/2/4
    }

    @media(min-width:1025px) {
        [data-theme^=toefl] .c-ping-pong-card--left .c-ping-pong-card__content {
            order: 2;
            padding-inline-end: unset;
            padding-inline-start: clamp(var(--spacing-20), 4vi, var(--spacing-80))
        }
    }

    .c-ping-pong-card--left .c-ping-pong-card__media-wrapper {
        grid-area: 1/1/2/3;
        justify-self: flex-start;
        margin-inline-end: var(--spacing-16)
    }

    [data-theme^=toefl] .c-ping-pong-card--left .c-ping-pong-card__media-wrapper {
        block-size: 100%;
        margin-inline-end: 0
    }

    @media(min-width:1025px) {
        [data-theme^=toefl] .c-ping-pong-card--left .c-ping-pong-card__media-wrapper {
            margin-block-start: clamp(var(--spacing-16), 4.5vi, var(--spacing-64))
        }
    }

    .c-ping-pong-card[data-theme=toefl-xdark] .c-ping-pong-card__content {
        padding-block: clamp(var(--spacing-48), 4vi, var(--spacing-80)) clamp(var(--spacing-20), 4vi, var(--spacing-80));
        padding-inline: clamp(var(--spacing-20), 4vi, var(--spacing-80))
    }

    .c-ping-pong-grid__card-container+.c-ping-pong-grid__card-container .c-ping-pong-card__media-wrapper img {
        display: block
    }

    [data-theme^=toefl] .c-ping-pong-grid__card-container+.c-ping-pong-grid__card-container .c-ping-pong-card__media-wrapper img:first-child {
        block-size: 23.4375rem;
        inline-size: 18.76294rem;
        inset-block-start: 0;
        inset-inline-start: 9.72rem;
        object-fit: cover;
        position: absolute;
        transform: rotate(9.313deg)
    }

    [data-theme^=toefl] .c-ping-pong-grid__card-container+.c-ping-pong-grid__card-container .c-ping-pong-card__media-wrapper img:nth-child(2) {
        block-size: 20.3125rem;
        inline-size: 16.25419rem;
        inset-block-start: .62rem;
        inset-inline-start: .6rem;
        object-fit: cover;
        position: absolute;
        transform: rotate(-3.268deg)
    }

    [data-theme^=toefl] .c-ping-pong-grid__card-container+.c-ping-pong-grid__card-container .c-ping-pong-card__media-wrapper img:nth-child(3) {
        block-size: 3.92913rem;
        inline-size: 4.36288rem;
        inset-block-start: 11.96rem;
        inset-inline-start: -1.47rem;
        object-fit: cover;
        position: absolute;
        transform: rotate(-31.478deg)
    }

    @media(min-width:1025px) {
        [data-theme^=toefl] .c-ping-pong-grid__card-container+.c-ping-pong-grid__card-container .c-ping-pong-card__media-wrapper img:first-child {
            block-size: 45.375rem;
            inline-size: 36.28644rem;
            inset-block-start: 0;
            inset-inline-start: 2.73rem;
            object-fit: cover;
            position: absolute;
            transform: rotate(9.313deg)
        }

        [data-theme^=toefl] .c-ping-pong-grid__card-container+.c-ping-pong-grid__card-container .c-ping-pong-card__media-wrapper img:nth-child(2) {
            block-size: 39.3125rem;
            inline-size: 31.43469rem;
            inset-block-start: 1.19rem;
            inset-inline-start: 5.62rem;
            object-fit: cover;
            position: absolute;
            transform: rotate(-3.268deg)
        }

        [data-theme^=toefl] .c-ping-pong-grid__card-container+.c-ping-pong-grid__card-container .c-ping-pong-card__media-wrapper img:nth-child(3) {
            block-size: 6.7105rem;
            inline-size: 7.648rem;
            inset-block-start: 23.71rem;
            inset-inline-start: -.38rem;
            object-fit: cover;
            position: absolute;
            transform: rotate(-31.478deg)
        }
    }
}

@layer components {
    .c-ping-pong-grid-a {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(auto-fit, 1fr)
    }

    .c-ping-pong-grid-a__headline {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-24);
        grid-area: 1/1/2/4;
        padding-block: var(--module-padding-block) clamp(var(--spacing-32), 2.5vi, var(--spacing-40));
        padding-inline: var(--page-padding-inline)
    }

    .c-ping-pong-grid-a__headline h2 {
        font-family: var(--font-heading) !important;
        font-size: var(--font-size-heading-xlarge);
        font-weight: var(--font-weight);
        line-height: var(--font-line-height-xtight)
    }

    .c-ping-pong-grid-a__headline p {
        font-family: var(--font-body) !important;
        font-size: var(--font-size-large);
        font-weight: var(--font-weight);
        line-height: var(--font-line-height);
        padding-block: var(--spacing-12)
    }

    @media(min-width:769px) {
        .c-ping-pong-grid-a__headline {
            align-items: center;
            display: grid;
            grid-template-columns: 1fr auto;
            margin-inline: var(--page-padding-inline);
            padding-inline: 0
        }
    }

    [data-theme^=toefl] .c-ping-pong-grid-a__headline {
        align-items: center;
        display: flex;
        text-align: center
    }

    [data-theme^=toefl] .c-ping-pong-grid-a__headline h2 {
        font-family: var(--font-heading) !important;
        font-size: var(--font-size-heading-large);
        font-weight: var(--font-weight-semibold);
        line-height: var(--font-line-height-3xtight)
    }

    @media(min-width:769px) {
        [data-theme^=toefl] .c-ping-pong-grid-a__headline h2 {
            font-family: var(--font-heading) !important;
            font-size: var(--font-size-heading-2xlarge);
            font-weight: var(--font-weight-semibold);
            line-height: var(--font-line-height-3xtight)
        }
    }

    .c-ping-pong-grid-a__card-wrapper {
        grid-area: 2/1/2/4;
        list-style: none;
        padding-inline: var(--page-padding-inline)
    }

    [data-theme^=toefl] .c-ping-pong-grid-a__card-wrapper {
        overflow: hidden
    }

    @media(min-width:769px) {
        .c-ping-pong-grid-a__card-wrapper {
            position: relative
        }
    }

    .c-ping-pong-grid-a__card-wrapper>li {
        padding-block-start: var(--module-padding-block)
    }

    .c-ping-pong-grid-a__card-wrapper>li+li {
        padding-block-start: 0
    }

    .c-ping-pong-grid-a__card-wrapper>* {
        position: relative
    }

    .c-ping-pong-card-a {
        --_headline-size: clamp(var(--font-size-heading-medium), var(--font-size-heading-medium) * 0.7 + 4vi, var(--font-size-heading-large));
        --_text-size: clamp(var(--font-size-text-small), var(--font-size-text-small) * 0.7 + 4vi, var(--font-size-text-medium))
    }

    .c-ping-pong-card-a__row {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between
    }
}

@layer components {
    @media(min-width:769px) {
        .c-ping-pong-card-a__row {
            gap: var(--spacing-80)
        }
    }

    @media(min-width:1441px) {
        .c-ping-pong-card-a__row {
            gap: var(--spacing-136)
        }
    }

    @media(max-width:769px) {
        .c-ping-pong-card-a__row {
            display: flex;
            flex-direction: column-reverse;
            gap: 0
        }
    }

    [data-theme^=toefl] .c-ping-pong-card-a {
        background-color: var(--color-surface);
        display: flex;
        flex-direction: column
    }

    @media(min-width:1025px) {
        [data-theme^=toefl] .c-ping-pong-card-a {
            flex-direction: row
        }
    }

    .c-ping-pong-card-a__content {
        display: flex;
        flex-direction: column;
        gap: clamp(var(--spacing-40), 4.5vi, var(--spacing-64));
        grid-area: 1/1/2/2;
        justify-content: flex-end;
        margin-block-start: clamp(var(--spacing-16), 4.5vi, var(--spacing-64));
        max-inline-size: 20rem
    }

    @media(min-width:1025px) {
        .c-ping-pong-card-a__content {
            margin-block-start: 0
        }
    }

    [data-theme^=toefl] .c-ping-pong-card-a__content {
        flex: 1;
        gap: 0;
        margin-block-start: unset;
        max-inline-size: none;
        padding-block-end: var(--spacing-48)
    }

    @media(min-width:1025px) {
        [data-theme^=toefl] .c-ping-pong-card-a__content {
            align-self: center;
            padding-block-end: unset;
            padding-inline-end: clamp(var(--spacing-20), 4vi, var(--spacing-80))
        }
    }

    .c-ping-pong-card-a__content h1,
    .c-ping-pong-card-a__content h2,
    .c-ping-pong-card-a__content h3,
    .c-ping-pong-card-a__content h4,
    .c-ping-pong-card-a__content h5,
    .c-ping-pong-card-a__content h6 {
        text-wrap: balance;
        font-family: var(--font-heading) !important;
        font-size: var(--font-size-heading-large);
        font-size: var(--font-size-heading-medium);
        font-weight: var(--font-weight);
        line-height: var(--font-line-height-xtight)
    }

    @media(min-width:1025px) {

        .c-ping-pong-card-a__content h1,
        .c-ping-pong-card-a__content h2,
        .c-ping-pong-card-a__content h3,
        .c-ping-pong-card-a__content h4,
        .c-ping-pong-card-a__content h5,
        .c-ping-pong-card-a__content h6 {
            font-size: var(--font-size-heading-xlarge)
        }
    }

    [data-theme^=toefl] .c-ping-pong-card-a__content h1,
    [data-theme^=toefl] .c-ping-pong-card-a__content h2,
    [data-theme^=toefl] .c-ping-pong-card-a__content h3,
    [data-theme^=toefl] .c-ping-pong-card-a__content h4,
    [data-theme^=toefl] .c-ping-pong-card-a__content h5,
    [data-theme^=toefl] .c-ping-pong-card-a__content h6 {
        font-family: var(--font-heading) !important;
        font-size: var(--font-size-heading-large);
        font-weight: var(--font-weight-semibold);
        line-height: var(--font-line-height-3xtight)
    }

    @media(min-width:1025px) {

        [data-theme^=toefl] .c-ping-pong-card-a__content h1,
        [data-theme^=toefl] .c-ping-pong-card-a__content h2,
        [data-theme^=toefl] .c-ping-pong-card-a__content h3,
        [data-theme^=toefl] .c-ping-pong-card-a__content h4,
        [data-theme^=toefl] .c-ping-pong-card-a__content h5,
        [data-theme^=toefl] .c-ping-pong-card-a__content h6 {
            font-family: var(--font-heading) !important;
            font-size: var(--font-size-heading-3xlarge);
            font-weight: var(--font-weight-semibold);
            line-height: var(--font-line-height-3xtight)
        }
    }

    .c-ping-pong-card-a__content p {
        font-family: var(--font-body) !important;
        font-size: var(--font-size-medium);
        font-size: var(--_text-size);
        font-weight: var(--font-weight);
        line-height: var(--font-line-height)
    }

    .c-ping-pong-card-a__content h3,
    .c-ping-pong-card-a__content p {
        padding-block: var(--spacing-12)
    }

    .c-ping-pong-card-a__cta-group {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-16)
    }

    .c-ping-pong-card-a__media-wrapper {
        flex-grow: 1;
        position: relative
    }

    [data-theme^=toefl] .c-ping-pong-card-a__media-wrapper {
        aspect-ratio: 1/1;
        flex: 1;
        margin-inline-start: 0;
        min-block-size: 17.85rem
    }

    @media(min-width:1025px) {
        [data-theme^=toefl] .c-ping-pong-card-a__media-wrapper {
            align-self: flex-start
        }
    }

    .c-ping-pong-card-a__media-wrapper img {
        aspect-ratio: 3/2;
        display: block;
        inline-size: 100%;
        object-fit: cover
    }

    [data-theme^=toefl] .c-ping-pong-card-a__media-wrapper img:first-child {
        block-size: 11.02775rem;
        inline-size: 12.32363rem;
        inset-block-start: .89rem;
        inset-inline-end: 0;
        object-fit: cover;
        position: absolute;
        transform: rotate(-7.518deg)
    }

    [data-theme^=toefl] .c-ping-pong-card-a__media-wrapper img:nth-child(2) {
        block-size: 13.07794rem;
        inline-size: 8.66275rem;
        inset-block-start: 2.18rem;
        inset-inline-end: 5.84rem;
        object-fit: cover;
        position: absolute
    }

    [data-theme^=toefl] .c-ping-pong-card-a__media-wrapper img:nth-child(3) {
        block-size: 7.1195rem;
        inline-size: 8.88556rem;
        inset-block-start: .88rem;
        inset-inline-end: 9.95rem;
        object-fit: cover;
        position: absolute;
        transform: rotate(-4.787deg)
    }

    [data-theme^=toefl] .c-ping-pong-card-a__media-wrapper img:nth-child(4) {
        block-size: 14.01731rem;
        inline-size: 9.32219rem;
        inset-block-start: .89rem;
        inset-inline-end: 1.41rem;
        object-fit: cover;
        position: absolute;
        transform: rotate(-6.33deg)
    }

    @media(min-width:1025px) {
        [data-theme^=toefl] .c-ping-pong-card-a__media-wrapper img:first-child {
            block-size: 22.45256rem;
            inline-size: 25.091rem;
            inset-block-start: 1.06rem;
            inset-inline-end: 2.95rem;
            object-fit: cover;
            position: absolute;
            transform: rotate(-7.518deg)
        }

        [data-theme^=toefl] .c-ping-pong-card-a__media-wrapper img:nth-child(2) {
            block-size: 26.59775rem;
            inline-size: 17.73188rem;
            inset-block-start: 3.69rem;
            inset-inline-end: 14.78rem;
            object-fit: cover;
            position: absolute
        }

        [data-theme^=toefl] .c-ping-pong-card-a__media-wrapper img:nth-child(3) {
            block-size: 14.49531rem;
            inline-size: 18.09106rem;
            inset-block-start: 1.03rem;
            inset-inline-end: 23.14rem;
            object-fit: cover;
            position: absolute;
            transform: rotate(-4.787deg)
        }

        [data-theme^=toefl] .c-ping-pong-card-a__media-wrapper img:nth-child(4) {
            block-size: 28.53931rem;
            inline-size: 18.98rem;
            inset-block-start: 1.06rem;
            inset-inline-end: 5.81rem;
            object-fit: cover;
            position: absolute;
            transform: rotate(-6.33deg)
        }
    }

    @media(min-width:769px) {
        .c-ping-pong-card-a__content {
            flex: 0 0 21rem
        }
    }

    .c-ping-pong-card-a[data-theme=toefl-xdark] .c-ping-pong-card__content {
        padding-block: clamp(var(--spacing-48), 4vi, var(--spacing-80)) clamp(var(--spacing-20), 4vi, var(--spacing-80));
        padding-inline: clamp(var(--spacing-20), 4vi, var(--spacing-80))
    }

    .c-ping-pong-card-a__btn {
        display: grid;
        flex-grow: 1;
        gap: var(--spacing-28);
        grid-template-columns: repeat(1, 1fr)
    }

    @media(max-width:769px) {
        .c-ping-pong-card-a__btn {
            padding-block-end: var(--module-padding-block);
            padding-block-start: var(--spacing-32)
        }
    }

    @media(min-width:769px) {
        .c-ping-pong-card-a__btn {
            gap: 0;
            grid-template-columns: repeat(2, 1fr)
        }

        .c-ping-pong-card-a__btn>div {
            padding-block-end: var(--module-padding-block);
            padding-block-start: var(--spacing-32)
        }

        .c-ping-pong-card-a__btn>div:first-child {
            border-right: 1px solid;
            padding-inline-end: 10%
        }

        .c-ping-pong-card-a__btn>div:nth-child(2) {
            padding-inline-start: 20%
        }
    }

    .c-ping-pong-card-a__btn p {
        font-size: var(--font-size-heading-small);
        margin-block-end: var(--spacing-28)
    }

    .c-ping-pong-grid__card-container+.c-ping-pong-grid__card-container .c-ping-pong-card__media-wrapper img {
        display: block
    }

    [data-theme^=toefl] .c-ping-pong-grid__card-container+.c-ping-pong-grid__card-container .c-ping-pong-card__media-wrapper img:first-child {
        block-size: 23.4375rem;
        inline-size: 18.76294rem;
        inset-block-start: 0;
        inset-inline-start: 9.72rem;
        object-fit: cover;
        position: absolute;
        transform: rotate(9.313deg)
    }

    [data-theme^=toefl] .c-ping-pong-grid__card-container+.c-ping-pong-grid__card-container .c-ping-pong-card__media-wrapper img:nth-child(2) {
        block-size: 20.3125rem;
        inline-size: 16.25419rem;
        inset-block-start: .62rem;
        inset-inline-start: .6rem;
        object-fit: cover;
        position: absolute;
        transform: rotate(-3.268deg)
    }

    [data-theme^=toefl] .c-ping-pong-grid__card-container+.c-ping-pong-grid__card-container .c-ping-pong-card__media-wrapper img:nth-child(3) {
        block-size: 3.92913rem;
        inline-size: 4.36288rem;
        inset-block-start: 11.96rem;
        inset-inline-start: -1.47rem;
        object-fit: cover;
        position: absolute;
        transform: rotate(-31.478deg)
    }

    @media(min-width:1025px) {
        [data-theme^=toefl] .c-ping-pong-grid__card-container+.c-ping-pong-grid__card-container .c-ping-pong-card__media-wrapper img:first-child {
            block-size: 45.375rem;
            inline-size: 36.28644rem;
            inset-block-start: 0;
            inset-inline-start: 2.73rem;
            object-fit: cover;
            position: absolute;
            transform: rotate(9.313deg)
        }

        [data-theme^=toefl] .c-ping-pong-grid__card-container+.c-ping-pong-grid__card-container .c-ping-pong-card__media-wrapper img:nth-child(2) {
            block-size: 39.3125rem;
            inline-size: 31.43469rem;
            inset-block-start: 1.19rem;
            inset-inline-start: 5.62rem;
            object-fit: cover;
            position: absolute;
            transform: rotate(-3.268deg)
        }

        [data-theme^=toefl] .c-ping-pong-grid__card-container+.c-ping-pong-grid__card-container .c-ping-pong-card__media-wrapper img:nth-child(3) {
            block-size: 6.7105rem;
            inline-size: 7.648rem;
            inset-block-start: 23.71rem;
            inset-inline-start: -.38rem;
            object-fit: cover;
            position: absolute;
            transform: rotate(-31.478deg)
        }
    }
}

@layer components {
    .c-product-listing-grid__header {
        border-block-end: 1px solid var(--color-on-surface);
        display: flex;
        flex-direction: column
    }

    @media(min-width:769px) {
        .c-product-listing-grid__header {
            border-block-start: 1px solid var(--color-on-surface);
            flex-direction: row
        }

        .c-product-listing-grid__header>* {
            flex: 1
        }
    }

    .c-product-listing-grid__search {
        display: flex;
        padding-block: var(--spacing-24);
        padding-inline: var(--page-padding-inline);
        position: relative
    }

    @media(min-width:769px) {
        .c-product-listing-grid__search {
            padding-inline-end: var(--spacing-24)
        }
    }

    .c-product-listing-grid__search-button {
        background-color: transparent;
        border: none;
        color: var(--color-on-surface);
        display: grid;
        order: 1;
        place-items: center;
        position: relative;
        z-index: var(--z-container-high)
    }

    .c-product-listing-grid__search-button-image {
        block-size: var(--spacing-24);
        inline-size: var(--spacing-24);
        margin-inline-end: var(--spacing-2)
    }

    .c-product-listing-grid__search-input {
        background-color: transparent;
        border: none;
        color: var(--color-on-surface);
        flex: 1;
        font-family: var(--font-heading) !important;
        font-size: var(--font-size-heading-small);
        font-weight: var(--font-weight);
        inset-block: var(--spacing-8);
        inset-inline: var(--page-padding-inline);
        line-height: var(--font-line-height);
        order: 2;
        padding-block: 0;
        padding-inline: var(--spacing-32) var(--spacing-16);
        position: absolute;
        z-index: var(--z-reset)
    }

    @media(min-width:769px) {
        .c-product-listing-grid__search-input {
            inset-block: var(--spacing-24);
            inset-inline-end: 0
        }
    }

    .c-product-listing-grid__search-label {
        font-family: var(--font-heading) !important;
        font-size: var(--font-size-heading-small);
        font-weight: var(--font-weight);
        inset-block-start: 50%;
        line-height: var(--font-line-height);
        line-height: var(--font-line-height-2xtight);
        margin-inline-start: var(--spacing-32);
        pointer-events: none;
        position: absolute;
        transform: translateY(-50%);
        z-index: var(--z-container-high)
    }

    .c-product-listing-grid__search-label--active {
        background-color: var(--color-surface);
        font-family: var(--font-body) !important;
        font-size: var(--font-size-small);
        font-weight: var(--font-weight);
        inset-block-start: -.5ex;
        line-height: var(--font-line-height);
        transform: translateY(0)
    }

    @media(min-width:769px) {
        .c-product-listing-grid__search-label--active {
            transform: translateY(var(--spacing-16))
        }
    }

    .c-product-listing-grid__filter {
        border-block-start: 1px solid var(--color-outline);
        padding-block: var(--spacing-24);
        padding-inline: var(--page-padding-inline);
        white-space: nowrap
    }

    @media(min-width:769px) {
        .c-product-listing-grid__filter {
            border-block-start: none;
            padding-inline-start: clamp(var(--spacing-24), 4.5vi, var(--spacing-64));
            white-space: unset
        }
    }

    .c-product-listing-grid__content {
        background-color: var(--color-outline);
        border-inline: 1px solid var(--color-outline);
        display: flex;
        flex-wrap: wrap;
        gap: 1px;
        justify-content: center;
        list-style: none;
        margin-inline: var(--page-padding-inline)
    }

    .c-product-listing-grid__content>* {
        flex: 1 1 42ch
    }

    .c-product-listing-grid__pagingation {
        border-block-start: 1px solid var(--color-outline);
        padding-block-end: var(--module-padding-block);
        padding-block-start: var(--spacing-40);
        padding-inline: var(--page-padding-inline)
    }

    .c-product-listing-grid__pagingation-list {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-4);
        justify-content: center;
        list-style: none
    }

    .c-product-listing-grid__pagingation-link {
        block-size: var(--spacing-40);
        border: 1px solid var(--color-outline-variant);
        border-radius: 100em;
        color: var(--color-on-surface);
        display: grid;
        inline-size: var(--spacing-40);
        place-items: center;
        text-decoration: none
    }

    @media(hover:hover) {
        .c-product-listing-grid__pagingation-link:hover {
            background-color: var(--color-on-surface);
            color: var(--color-surface)
        }
    }

    .c-product-listing-grid__pagingation-link[aria-current=page] {
        background-color: var(--color-on-surface);
        color: var(--color-surface)
    }

    .c-product-listing-grid__pagingation-link--disabled {
        display: none
    }

    .c-product-card {
        background-color: var(--color-surface);
        color: var(--color-on-surface);
        list-style: none;
        padding-block: clamp(var(--spacing-28), 4.5vi, var(--spacing-48));
        padding-inline: clamp(var(--spacing-24), 4.5vi, var(--spacing-64))
    }

    .c-product-card__title {
        font-family: var(--font-heading-variant) !important;
        font-size: var(--font-size-heading-small);
        font-size: clamp(var(--font-size-heading-xsmall), var(--font-size-heading-xsmall)*.75 + 1vi, var(--font-size-heading-small));
        font-weight: var(--font-weight-semibold);
        line-height: var(--font-line-height-xtight)
    }

    .c-product-card__description {
        font-family: var(--font-body) !important;
        font-size: var(--font-size-medium);
        font-size: clamp(var(--font-size-small), var(--font-size-small)*.75 + 1vi, var(--font-size-medium));
        font-weight: var(--font-weight);
        line-height: var(--font-line-height);
        margin-block-start: var(--spacing-16)
    }

    .c-product-card__ctas {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-8);
        margin-block-start: var(--spacing-32)
    }

    .c-product-pathing {
        --_heading-size: clamp(var(--font-size-heading-medium), var(--font-size-heading-medium) * 0.7 + 4vi, var(--font-size-heading-xlarge));
        --_text-size: clamp(var(--font-size-text-medium), var(--font-size-text-medium) * 0.7 + 4vi, var(--font-size-text-large));
        background-color: var(--color-surface-container-1);
        border-block-start: 1px solid var(--color-outline-dim);
        container: pathingcards/inline-size;
        display: flex;
        flex-direction: column;
        gap: clamp(var(--spacing-40), 4vi, var(--spacing-56));
        padding-block: var(--module-padding-block);
        padding-inline: var(--page-padding-inline)
    }

    [data-theme^=ets] .c-product-pathing {
        --_color-surface-container: var(--brand-eggshell);
        --_color-on-surface: var(--brand-ink)
    }
}

@layer components {
    @media(min-width:1025px) {
        .c-product-pathing {
            border-block-start: 0;
            padding-block-start: 0
        }
    }

    .c-product-pathing__content {
        display: grid;
        gap: clamp(var(--spacing-16), 4vi, var(--spacing-24))
    }

    @media(min-width:1025px) {
        .c-product-pathing__content {
            border-block-start: 1px solid var(--color-outline-dim);
            grid-template-columns: 1fr 2fr;
            padding-block-start: clamp(var(--spacing-32), 4vi, var(--spacing-80));
            position: relative
        }

        .c-product-pathing__content:has(.c-product-pathing__heading:only-child) {
            grid-template-columns: none
        }
    }

    .c-product-pathing__heading {
        font-family: var(--font-heading) !important;
        font-size: var(--font-size-heading-xlarge);
        font-size: var(--_heading-size);
        font-weight: var(--font-weight);
        line-height: var(--font-line-height-xtight)
    }

    .c-product-pathing__description {
        display: flex;
        flex-direction: column;
        gap: clamp(var(--spacing-32), 4vi, var(--spacing-40));
        max-inline-size: 45rem
    }

    @media(min-width:1025px) {
        .c-product-pathing__description {
            margin-block-start: var(--spacing-8)
        }
    }

    .c-product-pathing__description p {
        font-family: var(--font-body) !important;
        font-size: var(--font-size-large);
        font-size: var(--_text-size);
        font-weight: var(--font-weight);
        line-height: var(--font-line-height)
    }

    .c-product-pathing__card-wrapper {
        display: grid;
        gap: 1px;
        grid-template-columns: repeat(auto-fit, minmax(30, 1fr));
        list-style: none
    }

    @container pathingcards (min-width: 60ch) {

        .c-product-pathing__card-wrapper:has(>li:nth-of-type(4)),
        .c-product-pathing__card-wrapper:not(:has(>li:nth-of-type(3))) {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    @container pathingcards (min-width: 75ch) {
        .c-product-pathing__card-wrapper:has(>li:nth-of-type(3)) {
            grid-template-columns: repeat(3, 1fr)
        }

        .c-product-pathing__card-wrapper:has(>li:nth-of-type(4)) {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    @container pathingcards (min-width: 90ch) {
        .c-product-pathing__card-wrapper:has(>li:nth-of-type(4)) {
            grid-template-columns: repeat(4, 1fr)
        }
    }

    @container pathingcards (min-width: 140ch) {
        .c-product-pathing__card-wrapper:has(>li:nth-of-type(5)) {
            grid-template-columns: repeat(auto-fit, minmax(25ch, 1fr))
        }
    }
}

@layer components {
    .c-product-pathing-card {
        --_heading-size: clamp(var(--font-size-heading-medium), var(--font-size-heading-medium) * 0.7 + 4vi, var(--font-size-heading-large));
        --_text-size: clamp(var(--font-size-text-medium), var(--font-size-text-medium) * 0.7 + 4vi, var(--font-size-text-large));
        block-size: 100%;
        display: grid;
        grid-template-rows: auto 1fr;
        position: relative;
        transition: background-color var(--easing)
    }

    @media(hover:hover) {
        .c-product-pathing-card:hover {
            background-color: var(--color-surface-container-2)
        }

        .c-product-pathing-card:hover .c-product-pathing-card__heading {
            text-decoration: underline;
            text-underline-offset: .1em
        }
    }

    @media(hover:hover)and (prefers-reduced-motion:no-preference) {
        .c-product-pathing-card:hover .c-product-pathing-card__image {
            transform: scale(1.2)
        }
    }

    .c-product-pathing-card__image-wrapper {
        border-block-end: 1px solid var(--_color-on-surface);
        order: 1;
        overflow: hidden;
        pointer-events: none;
        position: relative
    }

    .c-product-pathing-card__image {
        aspect-ratio: 1/1;
        display: block;
        inline-size: 100%;
        object-fit: cover;
        transition: transform var(--easing)
    }

    .c-product-pathing-card__content {
        display: flex;
        flex-direction: column;
        font-family: var(--font-body) !important;
        font-size: var(--font-size-large);
        font-size: var(--_text-size);
        gap: clamp(var(--spacing-16), 4.5vi, var(--spacing-24));
        order: 2;
        padding-block: clamp(var(--spacing-24), 2.5vi, var(--spacing-48)) var(--spacing-48);
        padding-inline: clamp(var(--spacing-16), 2.5vi, var(--spacing-48))
    }

    .c-product-pathing-card__content,
    .c-product-pathing-card__heading {
        font-weight: var(--font-weight);
        line-height: var(--font-line-height)
    }

    .c-product-pathing-card__heading {
        font-family: var(--font-heading-variant) !important;
        font-size: var(--font-size-heading-large);
        font-size: var(--_heading-size)
    }

    .c-product-pathing-card__heading>a {
        color: inherit;
        text-decoration: none
    }

    .c-product-pathing-card__heading>a:before {
        content: "";
        inset: 0;
        position: absolute;
        z-index: var(--z-reset)
    }

    .c-product-pathing-card__heading-text {
        position: relative
    }

    .c-product-pathing-card__text {
        pointer-events: none;
        position: relative
    }

    .c-recirculation {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-48);
        padding-block: var(--module-padding-block);
        padding-inline: var(--page-padding-inline)
    }

    .c-recirculation__content {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-16)
    }

    .c-recirculation__heading {
        font-family: var(--font-heading) !important;
        font-size: var(--font-size-heading-xlarge);
        font-size: clamp(var(--font-size-heading-medium), var(--font-size-heading-medium)*.7 + 4vi, var(--font-size-heading-xlarge));
        font-weight: var(--font-weight);
        line-height: var(--font-line-height-xtight)
    }

    .c-recirculation__description {
        display: flex;
        flex-direction: column;
        font-family: var(--font-body) !important;
        font-size: var(--font-size-large);
        font-size: clamp(var(--font-size-text-medium), var(--font-size-text-medium)*.7 + 4vi, var(--font-size-text-large));
        font-weight: var(--font-weight);
        gap: clamp(var(--spacing-32), 4vi, var(--spacing-40));
        line-height: var(--font-line-height)
    }
}

@layer components {
    @media(min-width:1025px) {
        .c-recirculation__description {
            padding-block-start: var(--spacing-8)
        }
    }

    .c-recirculation__card-wrapper {
        align-items: stretch;
        display: flex;
        gap: 1px;
        list-style: none
    }

    @media(max-width:767px) {
        .c-recirculation__card-wrapper {
            flex-direction: column
        }
    }

    .c-recirculation__card-container {
        flex: 1
    }

    .c-recirculation__cta {
        margin-inline: auto
    }

    [data-theme^=toefl] .c-recirculation__heading {
        font-family: var(--font-heading) !important;
        font-size: var(--font-size-heading-2xlarge);
        font-size: clamp(var(--font-size-heading-xlarge), var(--font-size-heading-xlarge)*.7 + 4vi, var(--font-size-heading-2xlarge));
        font-weight: var(--font-weight-semibold);
        line-height: var(--font-line-height-3xtight)
    }

    [data-theme^=toefl] .c-recirculation__content {
        display: grid;
        gap: clamp(var(--spacing-16), 4vi, var(--spacing-24))
    }

    @media(min-width:1025px) {
        [data-theme^=toefl] .c-recirculation__content {
            grid-template-columns: repeat(2, 1fr)
        }

        [data-theme^=toefl] .c-recirculation__content:has(.c-recirculation__heading:only-child) {
            grid-template-columns: none
        }
    }

    [data-theme^=toefl] .c-recirculation__card-wrapper {
        display: grid;
        gap: var(--gutter);
        grid-template-columns: repeat(3, minmax(16.875rem, 1fr));
        margin-inline: calc(var(--page-padding-inline)*-1);
        overflow-x: auto;
        padding-inline: var(--page-padding-inline)
    }

    .c-recirculation-card {
        background-color: var(--color-surface-container-2);
        block-size: 100%;
        color: var(--color-on-surface);
        display: flex;
        flex-direction: column;
        gap: clamp(var(--spacing-12), 4.5vi, var(--spacing-56));
        inline-size: 100%;
        justify-content: space-between;
        position: relative;
        transition: background-color var(--easing)
    }
}

@layer components {
    @media(hover:hover) {
        .c-recirculation-card:hover {
            background-color: var(--color-surface-container-1)
        }

        .c-recirculation-card:hover .c-recirculation-card__heading {
            text-decoration: underline;
            text-underline-offset: .1em
        }
    }

    @media(hover:hover)and (prefers-reduced-motion:no-preference) {
        .c-recirculation-card:hover .c-recirculation-card__primary-image {
            transform: scale(1.2)
        }
    }

    .c-recirculation-card__image-wrapper {
        margin-inline-end: var(--spacing-40);
        overflow: hidden;
        pointer-events: none
    }

    .c-recirculation-card__primary-image {
        aspect-ratio: 5/4;
        display: block;
        inline-size: 100%;
        object-fit: cover;
        transition: transform var(--easing)
    }

    .c-recirculation-card__content {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        gap: var(--spacing-8);
        padding: clamp(var(--spacing-24), 4.5vi, var(--spacing-32))
    }

    .c-recirculation-card__text {
        display: grid;
        grid-template-areas: "eyebrow""heading"
    }

    .c-recirculation-card__eyebrow {
        font-family: var(--font-body) !important;
        font-size: var(--font-size-eyebrow-small);
        font-size: clamp(var(--font-size-eyebrow-small), var(--font-size-eyebrow-small)*.7 + 1vi, var(--font-size-eyebrow-large));
        font-weight: var(--font-weight);
        grid-area: eyebrow;
        letter-spacing: var(--font-letter-spacing-loose);
        line-height: var(--font-line-height-3xtight);
        text-transform: uppercase
    }

    .c-recirculation-card__heading {
        font-family: var(--font-heading-variant) !important;
        font-size: var(--font-size-heading-xsmall);
        font-size: clamp(var(--font-size-heading-xsmall), var(--font-size-heading-xsmall)*.7 + 4vi, var(--font-size-heading-small));
        font-weight: var(--font-weight-semibold);
        grid-area: heading;
        line-height: var(--font-line-height-xtight);
        padding-block: var(--spacing-12)
    }

    .c-recirculation-card__heading a {
        color: inherit;
        display: block;
        text-decoration: none
    }

    .c-recirculation-card__heading a:before {
        content: "";
        inset: 0;
        position: absolute
    }

    .c-recirculation-card__cta {
        font-weight: var(--font-weight-semibold)
    }

    [data-theme^=toefl] .c-recirculation-card {
        background-color: transparent;
        display: grid;
        gap: var(--spacing-40);
        grid-template-areas: "image""content"
    }

    [data-theme^=toefl] .c-recirculation-card__content {
        background-color: transparent;
        gap: var(--spacing-28);
        grid-area: content;
        padding: 0
    }

    [data-theme^=toefl] .c-recirculation-card__image-wrapper {
        aspect-ratio: 1/1;
        display: grid;
        grid-area: image;
        padding-inline-end: unset;
        position: relative
    }

    [data-theme^=toefl] .c-recirculation-card__primary-image {
        aspect-ratio: 1/1;
        display: none
    }

    [data-theme^=toefl] .c-recirculation-card__ambient-image,
    [data-theme^=toefl] .c-recirculation-card__silhouette-image {
        display: block;
        inline-size: 100%;
        object-fit: cover
    }

    [data-theme^=toefl] .c-recirculation-card__ambient-image {
        aspect-ratio: 5/4
    }

    [data-theme^=toefl] .c-recirculation-card__silhouette-image {
        aspect-ratio: 4/5;
        inline-size: 80%;
        inset-block-end: 0;
        inset-inline: 1rem;
        position: absolute;
        rotate: -4deg
    }

    [data-theme^=toefl] .c-recirculation-card--layered-2 .c-recirculation-card__image-wrapper {
        align-items: end
    }

    [data-theme^=toefl] .c-recirculation-card--layered-2 .c-recirculation-card__silhouette-image {
        inset-block-end: unset;
        inset-block-start: 0;
        rotate: 4deg
    }

    [data-theme^=toefl] .c-recirculation-card--layered-3 .c-recirculation-card__image-wrapper {
        align-items: end
    }

    [data-theme^=toefl] .c-recirculation-card--layered-3 .c-recirculation-card__silhouette-image {
        aspect-ratio: 5/4;
        inset-block-end: unset;
        inset-block-start: 0
    }

    [data-theme^=toefl] .c-recirculation-card--single .c-recirculation-card__primary-image {
        display: block
    }

    [data-theme^=toefl] .c-recirculation-card--single .c-recirculation-card__primary-image__ambient-image,
    [data-theme^=toefl] .c-recirculation-card--single .c-recirculation-card__primary-image__silhouette-image {
        display: none
    }

    [data-theme^=toefl] .c-recirculation-card__text {
        display: grid;
        gap: var(--spacing-8)
    }

    [data-theme^=toefl] .c-recirculation-card__eyebrow {
        font-family: var(--font-body) !important;
        font-size: var(--font-size-small);
        font-weight: var(--font-weight);
        letter-spacing: 0;
        line-height: var(--font-line-height);
        text-transform: none
    }

    [data-theme^=toefl] .c-recirculation-card__heading {
        font-family: var(--font-heading) !important;
        font-size: var(--font-size-heading-small);
        font-size: clamp(var(--font-size-heading-small), var(--font-size-heading-small)*.7 + 2vi, var(--font-size-heading-medium));
        font-weight: var(--font-weight-semibold);
        line-height: var(--font-line-height-3xtight);
        padding-block: 0
    }

    [data-theme^=toefl] .c-recirculation-card__cta {
        border: 1px solid var(--color-outline-variant);
        font-family: var(--font-body) !important;
        font-size: var(--font-size-eyebrow-small);
        font-weight: var(--font-weight-semibold);
        inline-size: max-content;
        letter-spacing: var(--font-letter-spacing-loose);
        line-height: var(--font-line-height-3xtight);
        padding-block: var(--spacing-16);
        padding-inline: var(--spacing-24);
        text-transform: uppercase
    }

    .c-search {
        border-block-end: 1px solid var(--color-outline-highlight);
        border-block-start: 1px solid var(--color-outline-highlight);
        font-family: var(--font-heading) !important;
        font-size: var(--font-size-heading-small) !important;
        font-size: clamp(var(--font-size-medium), var(--font-size-medium)*.85 + .5vi, var(--font-size-heading-small));
        font-weight: var(--font-weight) !important;
        grid-column: span 4/span 4;
        line-height: var(--font-line-height) !important;
        margin-block-start: var(--spacing-56);
        position: relative
    }

    .c-search__search-form {
        align-items: center;
        border-block-end: 1px solid transparent;
        border-block-start: 1px solid transparent;
        display: flex;
        padding-block: var(--spacing-24)
    }
}

@layer components {
    @media(hover:hover) {
        .c-search__search-form:hover {
            border-color: var(--color-outline-highlight)
        }
    }

    .c-search__search-label {
        font-family: var(--font-heading) !important;
        font-size: clamp(var(--font-size-heading-xsmall), var(--font-size-heading-xsmall)*.7 + 1vi, var(--font-size-heading-small)) !important;
        padding-inline: var(--spacing-4) var(--spacing-48);
        pointer-events: none;
        position: absolute
    }

    .c-search__search-label,
    .c-search__search-label--active {
        color: var(--color-on-surface);
        font-weight: var(--font-weight) !important;
        line-height: var(--font-line-height) !important
    }

    .c-search__search-label--active {
        background-color: var(--color-surface);
        font-family: var(--font-body) !important;
        font-size: var(--font-size-small) !important;
        inset-block-start: var(--spacing-12)
    }

    .c-search__search-input {
        background-color: transparent;
        block-size: clamp(var(--spacing-32), 2vi, var(--spacing-48));
        border: none;
        color: inherit;
        color: var(--color-on-surface);
        inline-size: 100%;
        padding-block-start: var(--spacing-4);
        padding-inline: var(--spacing-4)
    }

    .c-search__search-button {
        background-color: transparent;
        border: none;
        display: flex;
        margin-inline-start: var(--spacing-16) !important
    }

    .c-select {
        align-items: center;
        color: var(--color-on-surface);
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-16);
        position: relative;
        row-gap: var(--spacing-8)
    }

    .c-select__combobox {
        flex: 1;
        position: relative
    }

    .c-select__combobox:after {
        block-size: .5rem;
        border-block-end: 1px solid var(--color-on-surface);
        border-inline-end: 1px solid var(--color-on-surface);
        content: "";
        display: block;
        inline-size: .5rem;
        inset-block-start: 50%;
        inset-inline-end: var(--spacing-24);
        pointer-events: none;
        position: absolute;
        transform: translateY(-65%) rotate(45deg)
    }

    .c-select__combobox--open .c-select__menu {
        display: block
    }

    .c-select__combobox--open:after {
        transform: translateY(-10%) rotate(225deg)
    }

    .c-select__combobox--open .c-select__input {
        border-end-end-radius: 0;
        border-end-start-radius: 0
    }

    .c-select__label {
        cursor: auto;
        font-size: var(--font-size-eyebrow-small);
        font-weight: var(--font-weight);
        letter-spacing: var(--font-letter-spacing-loose);
        line-height: var(--font-line-height-3xtight);
        text-transform: uppercase
    }

    .c-select__input,
    .c-select__label {
        font-family: var(--font-body) !important
    }

    .c-select__input {
        border: 1px solid var(--color-on-surface);
        border-radius: var(--spacing-24);
        cursor: pointer;
        font-size: var(--font-size-small);
        font-weight: var(--font-weight-semibold);
        line-height: var(--font-line-height);
        padding-block: var(--spacing-12);
        padding-inline: var(--spacing-24) var(--spacing-48);
        user-select: none
    }
}

@layer components {
    @media(hover:hover) {
        [data-theme$=light] .c-select__input:hover {
            background-color: var(--brand-eggshell-30)
        }
    }

    .c-select__menu {
        background-color: var(--color-surface);
        border: 1px solid var(--color-on-surface);
        border-block-start: none;
        border-end-end-radius: var(--spacing-24);
        border-end-start-radius: var(--spacing-24);
        display: none;
        inline-size: 100%;
        inset-block-start: 100%;
        inset-inline-start: 0;
        overflow: hidden;
        position: absolute;
        user-select: none;
        z-index: var(--z-container-high)
    }

    .c-select__option {
        cursor: pointer;
        font-family: var(--font-body) !important;
        font-size: var(--font-size-small);
        font-weight: var(--font-weight);
        line-height: var(--font-line-height);
        padding-block: var(--spacing-12);
        padding-inline: var(--spacing-24)
    }

    @media(hover:hover) {
        .c-select__option:hover {
            background-color: var(--color-primary);
            color: var(--color-on-primary)
        }
    }

    .c-select__option--current {
        background-color: var(--color-primary);
        color: var(--color-on-primary)
    }

    .c-select__option[aria-selected=true] {
        font-family: var(--font-body) !important;
        font-size: var(--font-size-small);
        font-weight: var(--font-weight-semibold);
        line-height: var(--font-line-height)
    }

    .c-sign-up-breaker {
        background-size: cover;
        display: none;
        padding-block: var(--module-padding-block);
        padding-inline: var(--page-padding-inline)
    }
}

@layer components {
    @media(min-width:1025px) {
        .c-sign-up-breaker {
            grid-template-columns: 1fr 2fr
        }
    }

    .c-sign-up-breaker--loaded {
        display: grid
    }

    .c-sign-up-breaker__heading {
        border-block-end: 1px solid var(--color-outline-dim);
        font-family: var(--font-heading) !important;
        font-size: var(--font-size-heading-xlarge);
        font-size: clamp(var(--font-size-heading-medium), var(--font-size-heading-medium)*.75 + 1vi, var(--font-size-heading-xlarge)) !important;
        font-weight: var(--font-weight);
        font-weight: var(--font-weight) !important;
        line-height: var(--font-line-height-xtight);
        line-height: var(--font-line-height-xtight) !important;
        padding-block-end: var(--spacing-16)
    }

    @media(min-width:1025px) {
        .c-sign-up-breaker__heading {
            border-block-end: 0;
            border-inline-end: 1px solid var(--color-outline-dim);
            padding-block-end: 0;
            padding-inline-end: clamp(var(--spacing-32), 8vi, var(--spacing-120))
        }
    }

    .c-sign-up-breaker__content {
        display: grid;
        gap: var(--spacing-32);
        padding-block-start: var(--spacing-24)
    }

    @media(min-width:1025px) {
        .c-sign-up-breaker__content {
            padding-block-start: 0;
            padding-inline-start: clamp(var(--spacing-32), 8vi, var(--spacing-120))
        }
    }

    .c-sign-up-breaker__description {
        padding-bottom: 0 !important
    }

    .c-sign-up-form-modal {
        background-color: var(--color-surface);
        display: grid
    }
}

@layer components {
    @media(min-width:1025px) {
        .c-sign-up-form-modal {
            grid-template-columns: 40% 1fr
        }
    }

    .c-sign-up-form-modal__left-content {
        background-color: var(--color-surface);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-block: var(--spacing-32);
        padding-inline: var(--page-padding-inline)
    }

    .c-sign-up-form-modal__left-content svg {
        block-size: 18rem;
        color: var(--color-primary);
        display: none;
        inline-size: 18rem
    }

    @media(min-width:1025px) {
        .c-sign-up-form-modal__left-content svg {
            display: block
        }

        .c-sign-up-form-modal__left-content {
            padding-block: 6.5rem;
            padding-inline: var(--spacing-64)
        }
    }

    .c-sign-up-form-modal__left-content h2 {
        color: var(--color-on-surface);
        font-family: var(--font-heading) !important;
        font-size: var(--font-size-heading-xlarge);
        font-weight: var(--font-weight);
        line-height: var(--font-line-height-xtight)
    }

    @media(min-width:1025px) {
        .c-sign-up-form-modal__left-content h2 {
            font-family: var(--font-heading) !important;
            font-size: var(--font-size-heading-3xlarge);
            font-weight: var(--font-weight);
            line-height: var(--font-line-height-3xtight)
        }
    }

    .c-sign-up-form-modal__right-content {
        display: flex;
        flex-direction: column;
        padding-block-start: var(--spacing-32);
        padding-inline: var(--page-padding-inline)
    }

    @media(min-width:1025px) {
        .c-sign-up-form-modal__right-content {
            padding-block: var(--spacing-80);
            padding-inline: var(--spacing-80)
        }
    }

    .c-sign-up-form-modal__description {
        inline-size: 100%
    }

    .c-sign-up-form-modal__subheader {
        font-family: var(--font-heading) !important;
        font-size: var(--font-size-heading-small);
        font-weight: var(--font-weight);
        line-height: var(--font-line-height)
    }

    @media(min-width:1025px) {
        .c-sign-up-form-modal__subheader {
            font-family: var(--font-heading) !important;
            font-size: var(--font-size-heading-medium);
            font-weight: var(--font-weight);
            line-height: var(--font-line-height-xtight)
        }
    }

    .c-sign-up-form-modal__subcopy {
        font-family: var(--font-body) !important;
        font-size: var(--font-size-small);
        font-weight: var(--font-weight);
        line-height: var(--font-line-height);
        margin-block-end: var(--spacing-24)
    }

    @media(min-width:1025px) {
        .c-sign-up-form-modal__subcopy {
            font-family: var(--font-body) !important;
            font-size: var(--font-size-medium);
            font-weight: var(--font-weight);
            line-height: var(--font-line-height)
        }
    }

    .c-sign-up-form-modal__error-summary {
        border: 2px solid var(--color-error);
        color: var(--color-error);
        font-family: var(--font-heading-variant) !important;
        font-size: var(--font-size-heading-small);
        font-weight: var(--font-weight-semibold);
        line-height: var(--font-line-height-xtight);
        margin-block-end: var(--spacing-24);
        padding-block: var(--spacing-24);
        padding-inline: var(--spacing-24)
    }

    @media(min-width:1025px) {
        .c-sign-up-form-modal__error-summary {
            margin-block-end: var(--spacing-40)
        }
    }

    .c-sign-up-form-modal__error-summary ul {
        margin-block-start: var(--spacing-20);
        padding-inline-start: var(--spacing-32)
    }

    .c-sign-up-form-modal__error-summary a {
        color: inherit;
        font-family: var(--font-body) !important;
        font-size: var(--font-size-medium);
        font-weight: var(--font-weight);
        line-height: var(--font-line-height)
    }

    .c-sign-up-form-modal__error-summary-header {
        align-items: baseline;
        display: flex;
        gap: var(--spacing-8)
    }

    .c-sign-up-form-modal__error-summary-header svg {
        --icon-size: var(--spacing-16);
        min-inline-size: var(--icon-size)
    }

    .c-sign-up-form-modal__input-container {
        column-gap: var(--spacing-32);
        display: flex;
        flex-wrap: wrap;
        row-gap: var(--spacing-8)
    }

    .c-sign-up-form-modal__input-container fieldset {
        border: none;
        flex-basis: 100%;
        margin-block-end: var(--spacing-24)
    }

    .c-sign-up-form-modal__input-container fieldset:last-child {
        margin-block-end: var(--spacing-16)
    }

    .c-sign-up-form-modal__input-container legend {
        border-block-end: 1px solid var(--color-outline);
        font-family: var(--font-body) !important;
        font-size: var(--font-size-small);
        font-weight: var(--font-weight);
        inline-size: 100%;
        line-height: var(--font-line-height);
        margin-block-end: var(--spacing-24);
        padding-block-end: var(--spacing-16)
    }

    .c-sign-up-form-modal__input-container ul {
        list-style: none
    }

    .c-sign-up-form-modal__input-container li {
        align-items: start;
        column-gap: var(--spacing-12);
        display: flex;
        padding-block: var(--spacing-12)
    }

    .c-sign-up-form-modal__input-container input[type=checkbox] {
        block-size: var(--spacing-16);
        flex: 0 0 var(--spacing-16);
        inline-size: var(--spacing-16)
    }

    .c-sign-up-form-modal__input-container input[type=checkbox]+label {
        font-family: var(--font-body) !important;
        font-size: var(--font-size-small);
        font-weight: var(--font-weight);
        line-height: var(--font-line-height)
    }

    .c-sign-up-form-modal__input {
        flex-basis: 100%
    }

    @media(min-width:1025px) {

        .c-sign-up-form-modal__input:nth-child(2),
        .c-sign-up-form-modal__input:nth-child(3),
        .c-sign-up-form-modal__input:nth-child(5),
        .c-sign-up-form-modal__input:nth-child(6) {
            flex-basis: 22ch;
            flex-grow: 1
        }
    }

    .c-sign-up-form-modal__input--select {
        margin-block-end: var(--spacing-24);
        position: relative
    }

    .c-sign-up-form-modal__input--select>select {
        appearance: none;
        background-color: transparent;
        border: none;
        border-block-end: 1px solid var(--color-outline);
        border-radius: 0;
        font: inherit;
        font-size: var(--font-size-large);
        inline-size: 100%;
        margin: 0;
        padding-block: var(--spacing-20) var(--spacing-12);
        padding-inline: 0;
        text-indent: .01px;
        text-overflow: ""
    }

    .c-sign-up-form-modal__input--select>select::-ms-expand {
        display: none
    }

    .c-sign-up-form-modal__input--select>svg {
        --icon-size: 1.75em;
        inset-block-start: 50%;
        inset-inline-end: 0;
        position: absolute;
        transform: translateY(-50%)
    }

    .c-sign-up-form-modal__error-message {
        display: none
    }

    .c-sign-up-form-modal__fieldset--error .c-sign-up-form-modal__error-message {
        align-items: center;
        color: var(--color-error);
        column-gap: var(--spacing-8);
        display: flex;
        font-family: var(--font-body) !important;
        font-size: var(--font-size-medium);
        font-weight: var(--font-weight);
        line-height: var(--font-line-height);
        margin-block-end: var(--spacing-20)
    }

    .c-sign-up-form-modal__fieldset--error input[type=checkbox] {
        outline: 1px solid var(--color-error)
    }

    .c-sign-up-form-modal__fieldset--error input[type=checkbox]+label {
        color: var(--color-error)
    }

    .c-sign-up-form-modal__cta-container {
        background-color: var(--color-surface);
        border-block-start: 1px solid var(--brand-taupe);
        inset-block-end: 0;
        inset-inline: 0;
        margin-block-start: var(--spacing-24);
        margin-inline: calc(var(--page-padding-inline)*-1);
        padding-block: var(--spacing-24);
        padding-inline: var(--page-padding-inline);
        position: sticky
    }

    @media(min-width:1025px) {
        .c-sign-up-form-modal__cta-container {
            border: none;
            margin-inline: 0;
            padding-inline: 0;
            position: static
        }
    }

    .c-sign-up-form-modal__cta {
        display: block;
        inline-size: 100%;
        max-inline-size: 100%;
        text-align: center
    }

    @media(min-width:1025px) {
        .c-sign-up-form-modal__cta {
            max-inline-size: max-content
        }
    }
}

@layer components {
    .c-standard-breaker {
        --_border-size: 1px;
        --_border-color: var(--color-outline);
        --_grid-line: var(--_border-size) solid var(--_border-color);
        overflow-y: hidden;
        padding-block: var(--module-padding-block)
    }

    @media(min-width:769px) {
        .c-standard-breaker {
            border-block: var(--_grid-line);
            position: relative
        }

        .c-standard-breaker:after {
            background-color: var(--_border-color);
            content: "";
            inline-size: var(--_border-size);
            inset-block: 0;
            inset-inline-end: var(--page-padding-inline);
            position: absolute
        }
    }

    .c-standard-breaker__container {
        border-block-start: var(--_grid-line);
        display: flex;
        flex-direction: column;
        padding-inline: var(--page-padding-inline);
        row-gap: var(--spacing-24)
    }

    @media(min-width:769px) {
        .c-standard-breaker__container {
            align-items: flex-start;
            border-block-end: var(--_grid-line);
            flex-direction: row
        }
    }

    .c-standard-breaker__image {
        max-inline-size: 26rem;
        position: relative
    }

    @media(min-width:769px) {
        .c-standard-breaker__image {
            inline-size: clamp(80%, 75vi, 100%);
            margin-block-end: calc(var(--spacing-48)*-1 - var(--module-padding-block));
            padding-block-start: var(--spacing-72)
        }
    }

    .c-standard-breaker__image:after {
        background-color: var(--_border-color);
        block-size: var(--_border-size);
        content: "";
        inline-size: 100dvi;
        inset-block-end: 0;
        inset-inline-start: calc(var(--page-padding-inline)*-1);
        position: absolute
    }

    @media(min-width:769px) {
        .c-standard-breaker__image:after {
            display: none
        }
    }

    .c-standard-breaker__image img {
        aspect-ratio: 1/1;
        display: block;
        inline-size: 100%;
        object-fit: cover
    }

    .c-standard-breaker__content {
        display: grid;
        gap: var(--spacing-24)
    }

    @media(min-width:769px) {
        .c-standard-breaker__content {
            padding-block: var(--spacing-72);
            padding-inline: clamp(var(--gutter), 8vi, var(--spacing-120)) clamp(var(--gutter), 5vi, var(--spacing-64))
        }
    }

    .c-standard-breaker__header {
        font-family: var(--font-heading) !important;
        font-size: var(--font-size-heading-xlarge);
        font-size: clamp(var(--font-size-heading-large), var(--font-size-heading-large)*.6 + 1vi, var(--font-size-heading-xlarge));
        font-weight: var(--font-weight);
        line-height: var(--font-line-height-xtight)
    }

    .c-standard-breaker__description {
        font-family: var(--font-body) !important;
        font-size: var(--font-size-large);
        font-weight: var(--font-weight);
        line-height: var(--font-line-height)
    }

    .c-standard-breaker__cta-group {
        display: grid;
        gap: var(--spacing-24);
        margin-block-start: var(--spacing-16)
    }

    @media(min-width:24rem) {
        .c-standard-breaker__cta-group {
            display: flex;
            flex-wrap: wrap
        }
    }

    .c-standard-breaker__cta-group>* {
        display: block;
        inline-size: 100%;
        max-inline-size: unset
    }

    @media(min-width:24rem) {
        .c-standard-breaker__cta-group>* {
            inline-size: unset
        }
    }

    .c-standard-breaker[data-theme^=toefl],
    [data-theme^=toefl] .c-standard-breaker {
        --_border-size: 0;
        background-color: var(--color-surface-container-3);
        overflow: hidden
    }

    @media(min-width:769px) {

        .c-standard-breaker[data-theme^=toefl],
        [data-theme^=toefl] .c-standard-breaker {
            padding-block: calc(var(--module-padding-block)*1.5)
        }
    }

    .c-standard-breaker[data-theme^=toefl] .c-standard-breaker__container>*,
    [data-theme^=toefl] .c-standard-breaker .c-standard-breaker__container>* {
        flex: 1
    }

    .c-standard-breaker[data-theme^=toefl] .c-standard-breaker__image,
    [data-theme^=toefl] .c-standard-breaker .c-standard-breaker__image {
        aspect-ratio: 4/3;
        max-inline-size: unset;
        order: unset;
        position: relative
    }

    @media(min-width:769px) {

        .c-standard-breaker[data-theme^=toefl] .c-standard-breaker__image,
        [data-theme^=toefl] .c-standard-breaker .c-standard-breaker__image {
            aspect-ratio: unset;
            order: 1
        }
    }

    .c-standard-breaker[data-theme^=toefl] .c-standard-breaker__image img,
    [data-theme^=toefl] .c-standard-breaker .c-standard-breaker__image img {
        aspect-ratio: unset;
        inset-block-end: -33%;
        object-fit: unset;
        position: absolute
    }

    @media(min-width:769px) {

        .c-standard-breaker[data-theme^=toefl] .c-standard-breaker__image img,
        [data-theme^=toefl] .c-standard-breaker .c-standard-breaker__image img {
            inset-block-end: unset
        }
    }

    .c-standard-breaker[data-theme^=toefl] .c-standard-breaker__image img:first-child,
    [data-theme^=toefl] .c-standard-breaker .c-standard-breaker__image img:first-child {
        inline-size: 70vi;
        inset-inline-end: 31vi;
        transform: rotate(-4.497deg)
    }

    @media(min-width:769px) {

        .c-standard-breaker[data-theme^=toefl] .c-standard-breaker__image img:first-child,
        [data-theme^=toefl] .c-standard-breaker .c-standard-breaker__image img:first-child {
            inline-size: 30vi;
            inset-block-start: -50%;
            inset-inline-end: 27vi
        }
    }

    .c-standard-breaker[data-theme^=toefl] .c-standard-breaker__image img:nth-child(2),
    [data-theme^=toefl] .c-standard-breaker .c-standard-breaker__image img:nth-child(2) {
        inline-size: 50vi;
        inset-block-start: 85%;
        inset-inline-start: -5vi;
        transform: rotate(-23deg);
        z-index: 2
    }

    @media(min-width:769px) {

        .c-standard-breaker[data-theme^=toefl] .c-standard-breaker__image img:nth-child(2),
        [data-theme^=toefl] .c-standard-breaker .c-standard-breaker__image img:nth-child(2) {
            inline-size: 30vi;
            inset-block-start: 200%;
            inset-inline-end: 30vi;
            inset-inline-start: unset
        }
    }

    .c-standard-breaker[data-theme^=toefl] .c-standard-breaker__image img:nth-child(3),
    [data-theme^=toefl] .c-standard-breaker .c-standard-breaker__image img:nth-child(3) {
        inline-size: 70vi;
        inset-block-start: 30%;
        inset-inline-end: -10vi;
        transform: rotate(5.499deg);
        z-index: 3
    }

    @media(min-width:769px) {

        .c-standard-breaker[data-theme^=toefl] .c-standard-breaker__image img:nth-child(3),
        [data-theme^=toefl] .c-standard-breaker .c-standard-breaker__image img:nth-child(3) {
            inline-size: 30vi;
            inset-block-start: 50%;
            inset-inline-end: 13vi
        }
    }

    .c-standard-breaker[data-theme^=toefl] .c-standard-breaker__header,
    [data-theme^=toefl] .c-standard-breaker .c-standard-breaker__header {
        font-family: var(--font-heading) !important;
        font-size: var(--font-size-heading-xlarge);
        font-size: clamp(var(--font-size-heading-xlarge), var(--font-size-heading-xlarge)*.6 + 1vi, var(--font-size-heading-3xlarge));
        font-weight: var(--font-weight-semibold);
        line-height: var(--font-line-height-3xtight)
    }

    .c-standard-breaker[data-theme^=toefl] .c-standard-breaker__description,
    [data-theme^=toefl] .c-standard-breaker .c-standard-breaker__description {
        font-family: var(--font-body) !important;
        font-size: var(--font-size-medium);
        font-size: clamp(var(--font-size-text-medium), var(--font-size-text-medium)*.6 + 1vi, var(--font-size-text-xlarge));
        font-weight: var(--font-weight);
        line-height: var(--font-line-height)
    }

    .c-standard-breaker[data-theme^=toefl] .c-standard-breaker__content,
    [data-theme^=toefl] .c-standard-breaker .c-standard-breaker__content {
        order: unset;
        padding: 0
    }

    @media(min-width:769px) {

        .c-standard-breaker[data-theme^=toefl] .c-standard-breaker__content,
        [data-theme^=toefl] .c-standard-breaker .c-standard-breaker__content {
            order: 2
        }
    }
}

@layer components {
    .c-stat-breaker {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-40);
        padding-block: var(--module-padding-block);
        padding-inline: var(--page-padding-inline);
        text-align: center
    }

    .c-stat-breaker__headline {
        font-family: var(--font-heading) !important;
        font-size: var(--font-size-heading-medium);
        font-size: var(--_headline-size);
        font-weight: var(--font-weight);
        line-height: var(--font-line-height-xtight)
    }

    [data-theme^=ets] .c-stat-breaker__headline {
        --_headline-size: clamp(var(--font-size-heading-xsmall), var(--font-size-heading-xsmall) * 0.9 + 0.5vi, var(--font-size-heading-medium))
    }

    [data-theme^=toefl] .c-stat-breaker__headline {
        --_headline-size: clamp(var(--font-size-heading-small), var(--font-size-heading-small) * 0.9 + 0.5vi, var(--font-size-heading-large))
    }

    .c-stat-breaker__card-container {
        display: grid;
        gap: calc(var(--gutter)*2);
        grid-template-columns: repeat(auto-fit, minmax(25ch, 1fr));
        list-style: none;
        row-gap: var(--spacing-32)
    }

    .c-stat-breaker-card {
        align-items: center;
        display: flex;
        flex-direction: column;
        gap: clamp(var(--spacing-12), 2vi, var(--spacing-24))
    }

    .c-stat-breaker-card__primary-stat {
        color: var(--color-stat);
        font-family: var(--font-heading-variant) !important;
        font-size: clamp(var(--font-size-stat-large-min), var(--font-size-stat-large-min)*.9 + 1.75vi, var(--font-size-stat-large-max));
        font-weight: var(--font-weight-light);
        line-height: var(--font-line-height-3xtight)
    }

    [data-theme^=toefl] .c-stat-breaker-card__primary-stat {
        font-size: clamp(var(--font-size-stat-large-min), var(--font-size-stat-large-min)*.9 + 1.75vi, var(--font-size-stat-large-max))
    }

    [data-theme^=toefl] .c-stat-breaker-card__primary-stat,
    [data-theme^=toefl] .c-stat-breaker-card__stat-sub-title {
        font-family: var(--font-heading) !important;
        font-weight: var(--font-weight-semibold);
        line-height: var(--font-line-height-3xtight)
    }

    [data-theme^=toefl] .c-stat-breaker-card__stat-sub-title {
        font-size: var(--font-size-heading-xlarge)
    }

    .c-stat-breaker-card__description {
        font-size: clamp(var(--font-size-small), var(--font-size-small)*.9 + .5vi, var(--font-size-large));
        max-inline-size: 20ch
    }

    .c-sub-navigation {
        align-items: center;
        background-color: var(--color-surface);
        border-block: 1px solid var(--color-outline-variant);
        display: flex;
        gap: var(--spacing-20);
        inset-block-start: var(--global-nav-size);
        inset-inline: 0;
        max-block-size: var(--sub-nav-size);
        overflow: auto hidden;
        padding-block: var(--spacing-8) !important;
        padding-inline: var(--old-page-padding-inline) !important;
        position: fixed;
        z-index: var(--z-subnav)
    }

    .c-sub-navigation>:first-child {
        margin-inline-start: auto !important
    }

    .c-sub-navigation>:last-child {
        margin-inline-end: auto !important
    }

    .c-sub-navigation__header {
        color: var(--color-on-surface) !important;
        display: flex;
        font-family: var(--font-body) !important;
        font-size: var(--font-size-small) !important;
        font-weight: var(--font-weight) !important;
        line-height: var(--font-line-height) !important;
        text-decoration: none !important
    }

    .c-sub-navigation__divider,
    .c-sub-navigation__list-divider {
        background: var(--color-outline-variant);
        block-size: .625rem;
        min-inline-size: .0625rem
    }

    [data-theme$=light] .c-sub-navigation__list-divider {
        display: none
    }

    .c-sub-navigation__list {
        align-items: center;
        display: flex;
        flex-shrink: 5;
        gap: var(--spacing-20);
        list-style: none;
        margin: 0 !important;
        padding: 0 !important
    }

    .c-sub-navigation__list-item {
        align-items: center;
        display: flex;
        flex-shrink: 0;
        justify-content: center;
        padding-block: var(--spacing-8) !important;
        padding-inline: 0 !important
    }

    .c-sub-navigation__link {
        color: var(--color-on-surface) !important;
        font-family: var(--font-body) !important;
        font-size: var(--font-size-small) !important;
        font-weight: var(--font-weight-semibold) !important;
        line-height: var(--font-line-height) !important;
        line-height: .62rem;
        text-decoration: none !important
    }

    .c-sub-navigation__link[aria-current=page] {
        text-decoration: underline !important;
        text-underline-offset: .3em
    }
}

@layer components {
    @media(hover:hover) {
        .c-sub-navigation__link:hover {
            text-decoration: underline !important;
            text-underline-offset: .3em
        }
    }
}

@layer components {
    .c-sub-product-pathing {
        background-color: var(--color-surface-container-2);
        display: flex;
        flex-wrap: wrap;
        padding-block: var(--module-padding-block);
        padding-inline: var(--page-padding-inline)
    }

    .c-sub-product-pathing__content {
        display: grid;
        gap: var(--gutter);
        inline-size: 100%
    }

    @media(min-width:1025px) {
        .c-sub-product-pathing__content {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    .c-sub-product-pathing__illustration {
        display: none
    }

    @media(min-width:1025px) {
        .c-sub-product-pathing__illustration {
            block-size: auto;
            display: block;
            inline-size: 17rem;
            margin-inline-start: auto
        }
    }

    .c-sub-product-pathing__text-and-cta {
        display: flex;
        flex-direction: column
    }

    .c-sub-product-pathing__title {
        font-family: var(--font-heading) !important;
        font-size: var(--font-size-heading-medium);
        font-size: clamp(var(--font-size-heading-medium), var(--font-size-heading-medium)*.7 + 4vi, var(--font-size-heading-3xlarge));
        font-weight: var(--font-weight-semibold);
        line-height: var(--font-line-height-3xtight);
        margin-block-end: clamp(var(--spacing-16), 4.5vi, var(--spacing-24))
    }

    .c-sub-product-pathing__description {
        font-family: var(--font-body) !important;
        font-size: var(--font-size-medium);
        font-weight: var(--font-weight);
        line-height: var(--font-line-height);
        margin-block-end: clamp(var(--spacing-16), 4.5vi, var(--spacing-24))
    }

    @media(min-width:1025px) {
        .c-sub-product-pathing__description {
            font-size: clamp(var(--font-size-medium), var(--font-size-medium)*.7 + 4vi, var(--font-size-xlarge))
        }
    }

    .c-sub-product-pathing__cards {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-16);
        justify-content: space-between;
        list-style: none;
        margin-block-start: clamp(var(--spacing-40), 4.5vi, var(--spacing-56))
    }

    @media(min-width:1025px) {
        .c-sub-product-pathing__cards {
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: flex-start
        }
    }

    .c-sub-product-pathing__cards:has(>:nth-child(2):last-child) .c-sub-product-pathing__card:first-child {
        transform: rotate(.663deg)
    }

    .c-sub-product-pathing__cards:has(>:nth-child(2):last-child) .c-sub-product-pathing__card:last-child {
        transform: rotate(-2.336deg)
    }

    .c-sub-product-pathing__card:first-child {
        transform: rotate(-1deg)
    }

    .c-sub-product-pathing__card:nth-child(2) {
        transform: rotate(2deg)
    }

    .c-sub-product-pathing__card:nth-child(3) {
        transform: rotate(-1deg)
    }

    .c-sub-product-pathing__card:nth-child(4) {
        transform: rotate(1deg)
    }

    .c-sub-product-pathing__card:nth-child(5) {
        transform: rotate(-2deg)
    }

    @media(min-width:1025px) {
        .c-sub-product-pathing__card {
            flex: 1
        }

        .c-sub-product-pathing__card:first-child {
            transform: rotate(2.664deg)
        }

        .c-sub-product-pathing__card:nth-child(2) {
            transform: rotate(.663deg)
        }

        .c-sub-product-pathing__card:nth-child(3) {
            transform: rotate(-3.835deg)
        }

        .c-sub-product-pathing__card:nth-child(4) {
            transform: rotate(3.164deg)
        }

        .c-sub-product-pathing__card:nth-child(5) {
            transform: rotate(-1.836deg)
        }
    }
}

@layer components {
    .c-sub-product-card {
        align-items: center;
        background-color: var(--color-surface-container-1);
        block-size: 100%;
        border-block-end: .5rem solid currentcolor;
        display: flex;
        flex-direction: row;
        gap: var(--spacing-32);
        justify-content: space-between;
        padding-block: clamp(var(--spacing-20), 4.5vi, var(--spacing-28));
        padding-inline: clamp(var(--spacing-16), 4.5vi, var(--spacing-24));
        position: relative;
        transition: background-color var(--easing), transform var(--easing)
    }

    @media(hover:hover) {
        .c-sub-product-card:hover {
            background-color: var(--color-surface-container-3)
        }
    }

    @media(hover:hover)and (prefers-reduced-motion:no-preference) {
        .c-sub-product-card:hover {
            transform: rotate(-1deg)
        }
    }

    @media(hover:hover) {
        .c-sub-product-card:hover .c-sub-product-card__cta {
            background-color: var(--brand-midnight);
            border-color: var(--brand-midnight)
        }

        .c-sub-product-card:hover .c-sub-product-card__icon {
            color: var(--brand-white)
        }
    }

    @media(min-width:1025px) {
        .c-sub-product-card {
            align-items: flex-start;
            flex-direction: column;
            gap: clamp(var(--spacing-16), 4vi, var(--spacing-24));
            max-inline-size: 25ch
        }
    }

    .c-sub-product-card--wide {
        align-items: center;
        flex-direction: row;
        gap: var(--spacing-32);
        justify-content: space-between;
        max-inline-size: unset
    }

    .c-sub-product-card__text-container {
        display: flex;
        flex-direction: column
    }

    .c-sub-product-card__icon-eyebrow {
        block-size: .85em;
        min-inline-size: 2.65em;
        transform: translateY(.02em)
    }

    .c-sub-product-card__text-eyebrow {
        display: block;
        font-family: var(--font-body) !important;
        font-size: var(--font-size-eyebrow-small);
        font-weight: var(--font-weight);
        letter-spacing: var(--font-letter-spacing-loose);
        line-height: var(--font-line-height-3xtight);
        margin-block-end: var(--spacing-12);
        text-transform: uppercase
    }

    .c-sub-product-card__title {
        font-size: 1.5rem;
        font-weight: var(--font-weight-semibold);
        margin-block-end: var(--spacing-24)
    }

    .c-sub-product-card__link {
        align-items: baseline;
        color: inherit;
        display: flex;
        gap: .4ch;
        text-decoration: none;
        white-space: nowrap
    }

    .c-sub-product-card__link:after {
        content: "";
        inset: 0;
        position: absolute
    }

    .c-sub-product-card__description {
        font-family: var(--font-body) !important;
        font-size: var(--font-size-medium);
        font-weight: var(--font-weight);
        line-height: var(--font-line-height)
    }

    .c-sub-product-card__cta {
        align-items: center;
        align-self: auto;
        block-size: 2.75rem;
        border: 1px solid var(--color-outline-variant);
        border-radius: 50%;
        display: flex;
        flex: 0 0 2.75em;
        inline-size: 2.75rem;
        justify-content: center;
        transition: background-color var(--easing)
    }

    .c-sub-product-card__icon {
        block-size: 1.5rem;
        inline-size: 1.5rem;
        transition: color var(--easing)
    }

    .c-teaser-card-grid {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-16);
        padding-block: var(--module-padding-block);
        padding-inline: var(--page-padding-inline)
    }
}

@layer components {
    @media(min-width:1025px) {
        .c-teaser-card-grid {
            column-gap: clamp(var(--spacing-96), 4vi, var(--spacing-120));
            display: grid;
            grid-template-columns: 1fr 2fr
        }
    }

    .c-teaser-card-grid__content {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-16)
    }

    @media(min-width:1025px) {
        .c-teaser-card-grid__content {
            gap: var(--spacing-24);
            max-inline-size: clamp(12.5rem, 30vw, 24.5rem)
        }
    }

    .c-teaser-card-grid__top-line {
        background-color: var(--color-outline-highlight);
        block-size: .0625rem;
        inline-size: 3.125rem
    }

    .c-teaser-card-grid__title {
        font-family: var(--font-heading) !important;
        font-size: var(--font-size-heading-medium);
        font-weight: var(--font-weight);
        line-height: var(--font-line-height-xtight);
        padding-inline-end: var(--page-padding-inline)
    }

    @media(min-width:1025px) {
        .c-teaser-card-grid__title {
            font-family: var(--font-heading) !important;
            font-size: var(--font-size-heading-large);
            font-weight: var(--font-weight);
            line-height: var(--font-line-height-xtight);
            padding-inline-end: 0
        }
    }

    .c-teaser-card-grid__description {
        font-family: var(--font-body) !important;
        font-size: var(--font-size-medium);
        font-weight: var(--font-weight);
        line-height: var(--font-line-height);
        padding-inline-end: var(--page-padding-inline)
    }

    @media(min-width:1025px) {
        .c-teaser-card-grid__description {
            font-family: var(--font-body) !important;
            font-size: var(--font-size-large);
            font-weight: var(--font-weight);
            line-height: var(--font-line-height);
            padding-inline-end: 0
        }
    }

    .c-teaser-card-grid__cta {
        margin-block-end: var(--spacing-24);
        margin-block-start: var(--spacing-16)
    }

    @media(min-width:1025px) {
        .c-teaser-card-grid__cta {
            margin-block-end: 0;
            margin-block-start: var(--spacing-24)
        }
    }

    .c-teaser-card-grid__card-list {
        list-style: none;
        margin-inline-end: calc(var(--page-padding-inline)*-1)
    }

    .c-teaser-card-grid__card-list li {
        border-block-start: 1px solid var(--color-outline-dim)
    }

    .c-teaser-card-grid__card-list li:last-child {
        border-block-end: 1px solid var(--color-outline-dim)
    }

    .c-teaser-card {
        align-items: center;
        display: flex;
        gap: var(--spacing-32);
        padding-block: var(--spacing-24);
        padding-inline-end: var(--page-padding-inline);
        position: relative;
        transition: background-color var(--easing)
    }

    .c-teaser-card>* {
        order: 1
    }
}

@layer components {
    @media(hover:hover) {
        .c-teaser-card:hover {
            background-color: var(--color-surface-container-2)
        }

        .c-teaser-card:hover .c-teaser-card__title {
            text-decoration: underline;
            text-underline-offset: .1em
        }

        .c-teaser-card:hover .c-teaser-card__image {
            transform: scale(1.2)
        }

        .c-teaser-card:hover .c-teaser-card__cta {
            background-color: var(--brand-ice);
            border-color: var(--brand-ice)
        }

        .c-teaser-card:hover .c-teaser-card__icon {
            color: var(--brand-midnight)
        }
    }

    @media(max-width:1023px) {
        .c-teaser-card {
            align-items: flex-start;
            flex-direction: column;
            gap: clamp(var(--spacing-16), 4vi, var(--spacing-24))
        }
    }

    .c-teaser-card__image-container {
        flex-shrink: 0;
        inline-size: 8rem;
        order: 0;
        overflow: hidden;
        pointer-events: none
    }

    @media(min-width:1025px) {
        .c-teaser-card__image-container {
            inline-size: clamp(4rem, 10vi, 8rem)
        }
    }

    .c-teaser-card__image {
        aspect-ratio: 1/1;
        display: block;
        inline-size: 100%;
        object-fit: cover;
        transition: transform var(--easing)
    }

    .c-teaser-card__text-container {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        gap: var(--spacing-16);
        padding-block: var(--spacing-16)
    }

    @media(max-width:1023px) {
        .c-teaser-card__text-container {
            padding-block: 0
        }
    }

    .c-teaser-card__title {
        font-family: var(--font-heading-variant) !important;
        font-size: var(--font-size-heading-small);
        font-weight: var(--font-weight-semibold);
        line-height: var(--font-line-height-xtight)
    }

    @media(min-width:1025px) {
        .c-teaser-card__title {
            font-family: var(--font-heading-variant) !important;
            font-size: var(--font-size-heading-large);
            font-weight: var(--font-weight);
            line-height: var(--font-line-height)
        }
    }

    .c-teaser-card__title a {
        color: var(--on-surface);
        display: block;
        text-decoration: none
    }

    .c-teaser-card__title a:after {
        content: "";
        inset: 0;
        position: absolute
    }

    .c-teaser-card__cta {
        align-items: center;
        block-size: 2.75rem;
        border: 1px solid var(--color-outline-variant);
        border-radius: 50%;
        display: flex;
        flex: 0 0 2.75em;
        inline-size: 2.75rem;
        justify-content: center;
        justify-self: flex-end;
        transition: background-color var(--easing)
    }

    @media(max-width:1023px) {
        .c-teaser-card__cta {
            align-self: auto
        }
    }

    .c-teaser-card__icon {
        block-size: 1.5rem;
        inline-size: 1.5rem;
        transition: color var(--easing)
    }

    .c-teaser-card p {
        font-family: var(--font-body) !important;
        font-size: var(--font-size-medium);
        font-weight: var(--font-weight);
        line-height: var(--font-line-height)
    }
}

@layer variables {

    :root,
    [data-theme^=ets] {
        --brand-ink: #1a212b;
        --brand-eggshell: #f2e9d8;
        --brand-midnight: #103d4b;
        --brand-cyan: #4dd3fe;
        --brand-white: #fff;
        --brand-black: #000;
        --brand-taupe: #d6ccbe;
        --brand-terracotta: #a94d23;
        --brand-moss: #c5cb9f;
        --brand-ice: #aadde5;
        --brand-toefl-deep-blue: #132145;
        --brand-toefl-deep-green: #233f2c;
        --brand-toefl-deep-red: #4e0305;
        --brand-toefl-deep-yellow: #68541f;
        --brand-toefl-bright-blue: #2864ff;
        --brand-toefl-bright-green: #c1cd3c;
        --brand-toefl-bright-red: #ff460b;
        --brand-toefl-bright-yellow: #ffdb1e;
        --brand-toefl-light-blue: #b7c8ff;
        --brand-toefl-light-green: #e0ffbd;
        --brand-toefl-light-red: #fdb2fc;
        --brand-toefl-light-yellow: #fbfd9d;
        --brand-toefl-highlighter-yellow: #f0ff96;
        --brand-toefl-highlighter-orange: #ff8f60;
        --brand-toefl-periwinkle: #9196ff;
        --brand-ink-30: rgba(26, 33, 43, .3);
        --brand-ink-50: rgba(26, 33, 43, .5);
        --brand-ink-90: rgba(26, 33, 43, .9);
        --brand-cyan-30: rgba(77, 211, 254, .3);
        --brand-eggshell-30: hsla(39, 50%, 90%, .3);
        --brand-eggshell-50: hsla(39, 50%, 90%, .5);
        --brand-taupe-50: hsla(35, 23%, 79%, .5);
        --spacing-2: 0.125rem;
        --spacing-4: 0.25rem;
        --spacing-8: 0.5rem;
        --spacing-12: 0.75rem;
        --spacing-16: 1rem;
        --spacing-20: 1.25rem;
        --spacing-24: 1.5rem;
        --spacing-28: 1.75rem;
        --spacing-32: 2rem;
        --spacing-40: 2.5rem;
        --spacing-48: 3rem;
        --spacing-56: 3.5rem;
        --spacing-64: 4rem;
        --spacing-72: 4.5rem;
        --spacing-80: 5rem;
        --spacing-96: 6rem;
        --spacing-120: 7.5rem;
        --spacing-136: 8.5rem;
        --gutter: clamp(1rem, 1.75dvi, 1.5rem);
        --page-padding-min: var(--gutter);
        --page-max-inline-size: min(83.25rem, 100dvi - 2 * var(--page-padding-min));
        --page-padding-inline: calc((100dvi - var(--page-max-inline-size))/2);
        --old-page-max-inline-size: min(116rem, 100dvi - 2 * var(--gutter));
        --old-page-padding-inline: calc((100dvi - var(--old-page-max-inline-size))/2);
        --module-padding-block: clamp(var(--spacing-64), 8.5vi, var(--spacing-120));
        --global-nav-size: 3.99rem;
        --sub-nav-size: 2.62rem;
        --z-nav: 21;
        --z-nav-dropdown: 20;
        --z-subnav: 19;
        --z-fab: 18;
        --z-container-2xhigh: 3;
        --z-container-xhigh: 2;
        --z-container-high: 1;
        --z-reset: 0;
        --easing: 0.7s cubic-bezier(0.26, 0.29, 0, 1);
        --font-body: "Beausite Classic", system-ui, sans-serif;
        --font-heading: "Speckless", "Georgia", serif;
        --font-heading-variant: "Beausite Classic", system-ui, sans-serif;
        --font-line-height-3xtight: 1;
        --font-line-height-2xtight: 1.16;
        --font-line-height-xtight: 1.2;
        --font-line-height-tight: 1.3;
        --font-line-height: 1.4;
        --font-weight-light: 300;
        --font-weight: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-letter-spacing-loose: 0.08em;
        --font-size-xlarge: 1.25rem;
        --font-size-large: 1.125rem;
        --font-size-medium: 1rem;
        --font-size-small: 0.875rem;
        --font-size-eyebrow-large: 1rem;
        --font-size-eyebrow-small: 0.875rem;
        --font-size-heading-4xlarge: 5.75rem;
        --font-size-heading-3xlarge: 4rem;
        --font-size-heading-2xlarge: 3.5rem;
        --font-size-heading-xlarge: 2.5rem;
        --font-size-heading-large: 2rem;
        --font-size-heading-medium: 1.75rem;
        --font-size-heading-small: 1.5rem;
        --font-size-heading-xsmall: 1.25rem;
        --font-size-stat-large-max: 10rem;
        --font-size-stat-large-min: 7.5rem;
        --color-error: #d60000;
        --color-on-error: var(--brand-white);
        --color-primary: var(--brand-cyan);
        --color-on-primary: var(--brand-ink);
        --color-on-stat: var(--brand-midnight);
        --color-surface: var(--brand-white);
        --color-on-surface: var(--brand-ink);
        --color-surface-container-1: var(--brand-white);
        --color-surface-container-2: var(--brand-eggshell);
        --color-surface-container-3: var(--brand-ice);
        --color-surface-container-4: var(--brand-white);
        --color-surface-container-5: var(--brand-white);
        --color-outline: var(--brand-ink);
        --color-outline-variant: var(--brand-ink-50);
        --color-outline-dim: var(--brand-ink-30);
        --color-outline-highlight: var(--brand-cyan);
        --color-scrim: var(--brand-ink-90);
        --color-overlay: rgba(0, 0, 0, .7);
        --color-stat: var(--brand-midnight)
    }

    @media(min-width:26em) {

        :root,
        [data-theme^=ets] {
            --page-padding-min: clamp(1rem, 7.5dvi, 6.75rem)
        }
    }

    [data-theme=ets-light] {
        --color-primary: var(--brand-cyan);
        --color-on-primary: var(--brand-ink);
        --color-on-stat: var(--brand-midnight);
        --color-surface: var(--brand-eggshell);
        --color-on-surface: var(--brand-ink);
        --color-surface-container-1: var(--brand-eggshell);
        --color-surface-container-2: var(--brand-white);
        --color-surface-container-3: var(--brand-ice);
        --color-surface-container-4: var(--brand-eggshell);
        --color-surface-container-5: var(--brand-eggshell);
        --color-outline: var(--brand-ink);
        --color-outline-variant: var(--brand-ink-50);
        --color-outline-dim: var(--brand-ink-30);
        --color-stat: var(--brand-midnight)
    }

    [data-theme=ets-xdark] {
        --color-primary: var(--brand-cyan);
        --color-on-primary: var(--brand-ink);
        --color-surface: var(--brand-ink);
        --color-on-surface: var(--brand-eggshell);
        --color-surface-container-1: var(--brand-ink);
        --color-surface-container-2: var(--brand-midnight);
        --color-surface-container-3: var(--brand-ink);
        --color-surface-container-4: var(--brand-ink);
        --color-surface-container-5: var(--brand-ink);
        --color-outline: var(--brand-eggshell);
        --color-outline-variant: var(--brand-eggshell-50);
        --color-outline-dim: var(--brand-eggshell-30);
        --color-stat: var(--brand-ice)
    }

    [data-theme=ets-dark] {
        --color-primary: var(--brand-cyan);
        --color-on-primary: var(--brand-ink);
        --color-surface: var(--brand-midnight);
        --color-on-surface: var(--brand-eggshell);
        --color-surface-container-1: var(--brand-midnight);
        --color-surface-container-2: var(--brand-ink);
        --color-surface-container-3: var(--brand-midnight);
        --color-surface-container-4: var(--brand-midnight);
        --color-surface-container-5: var(--brand-midnight);
        --color-outline: var(--brand-eggshell);
        --color-outline-variant: var(--brand-eggshell-50);
        --color-outline-dim: var(--brand-eggshell-30);
        --color-stat: var(--brand-ice)
    }

    [data-theme^=toefl] {
        --font-heading: "Greet Narrow", system-ui, sans-serif;
        --font-heading-variant: var(--font-heading);
        --font-size-stat-large-max: 8.125rem;
        --font-size-stat-large-min: 6.25rem;
        --module-padding-block: clamp(var(--spacing-64), 8.5vi, var(--spacing-80))
    }

    [data-theme=toefl-xlight] {
        --color-primary: var(--brand-black);
        --color-on-primary: var(--brand-white);
        --color-surface: var(--brand-white);
        --color-on-surface: var(--brand-black);
        --color-surface-container-1: var(--brand-white);
        --color-surface-container-2: var(--brand-toefl-periwinkle);
        --color-surface-container-3: var(--brand-toefl-highlighter-yellow);
        --color-surface-container-4: var(--brand-toefl-bright-yellow);
        --color-surface-container-5: var(--brand-toefl-light-red);
        --color-outline: var(--brand-black);
        --color-outline-variant: var(--brand-ink-50);
        --color-outline-dim: var(--brand-ink-30);
        --color-stat: var(--brand-black)
    }

    [data-theme=toefl-xdark] {
        --color-primary: var(--brand-white);
        --color-on-primary: var(--brand-black);
        --color-surface: var(--brand-black);
        --color-on-surface: var(--brand-white);
        --color-surface-container-1: var(--brand-black);
        --color-surface-container-2: var(--brand-black);
        --color-surface-container-3: var(--brand-black);
        --color-surface-container-4: var(--brand-black);
        --color-surface-container-5: var(--brand-black);
        --color-outline: var(--brand-white);
        --color-outline-variant: var(--brand-eggshell-50);
        --color-outline-dim: var(--brand-eggshell-30);
        --color-outline-highlight: var(--brand-toefl-highlighter-yellow);
        --color-stat: var(--brand-white)
    }
}

@layer base {
    :root {
        accent-color: var(--color-primary);
        font-family: var(--font-body);
        font-size: clamp(100%, 90% + .15vi, 110%);
        font-weight: var(--font-weight);
        line-height: var(--font-line-height)
    }

    :root,
    [data-theme] {
        background-color: var(--color-surface);
        color: var(--color-on-surface)
    }

    [data-theme*=dark] {
        color-scheme: dark
    }

    [data-theme*=light] {
        color-scheme: light
    }

    body {
        overflow-x: hidden
    }

    body:has(.c-global-nav) {
        margin-block-start: var(--global-nav-size) !important
    }

    body:has(.c-sub-navigation) {
        margin-block-start: calc(var(--global-nav-size) + var(--sub-nav-size)) !important
    }
}

@layer resets {

    *,
    :after,
    :before {
        font-feature-settings: "kern";
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        box-sizing: border-box;
        font-kerning: normal
    }

    * {
        margin: 0;
        padding: 0
    }

    button,
    input:is([type=checkbox], [type=radio]),
    label {
        cursor: pointer
    }

    button,
    input,
    select,
    textarea {
        font: inherit
    }

    @media(forced-colors:active) {
        button {
            border: 1px solid !important
        }
    }

    :disabled,
    [aria-disabled] {
        cursor: not-allowed
    }

    :focus-visible {
        box-shadow: 0 0 0 4px var(--color-on-surface);
        outline: 2px solid var(--color-surface);
        outline-offset: 0
    }

    react-component :focus-visible {
        box-shadow: 0 0 0 4px var(--color-on-surface) !important;
        outline: 2px solid var(--color-surface) !important;
        outline-offset: 0 !important
    }

    react-component svg {
        block-size: var(--icon-size, 1em);
        color: var(--icon-color, inherit);
        inline-size: var(--icon-size, 1em)
    }

    react-component svg>* {
        fill: currentcolor
    }

    react-component img,
    react-component svg,
    react-component video {
        block-size: auto;
        max-inline-size: 100%
    }

    #storybook-root svg {
        block-size: var(--icon-size, 1em);
        color: var(--icon-color, inherit);
        inline-size: var(--icon-size, 1em)
    }

    #storybook-root svg>* {
        fill: currentcolor
    }

    #storybook-root img,
    #storybook-root svg,
    #storybook-root video {
        block-size: auto;
        max-inline-size: 100%
    }
}

@layer font-stack {
    @font-face {
        font-display: swap;
        font-family: Beausite Classic;
        font-style: normal;
        font-weight: 300;
        src: url(BeausiteClassic-Light.woff2) format("woff2"), url(BeausiteClassic-Light.woff) format("woff")
    }

    @font-face {
        font-display: swap;
        font-family: Beausite Classic;
        font-style: italic;
        font-weight: 300;
        src: url(BeausiteClassic-LightItalic.woff2) format("woff2"), url(BeausiteClassic-LightItalic.woff) format("woff")
    }

    @font-face {
        font-display: swap;
        font-family: Beausite Classic;
        font-style: normal;
        font-weight: 400;
        src: url(BeausiteClassic-Regular.woff2) format("woff2"), url(BeausiteClassic-Regular.woff) format("woff")
    }

    @font-face {
        font-display: swap;
        font-family: Beausite Classic;
        font-style: italic;
        font-weight: 400;
        src: url(BeausiteClassic-RegularItalic.woff2) format("woff2"), url(BeausiteClassic-RegularItalic.woff) format("woff")
    }

    @font-face {
        font-display: swap;
        font-family: Beausite Classic;
        font-style: normal;
        font-weight: 500;
        src: url(BeausiteClassic-Medium.woff2) format("woff2"), url(BeausiteClassic-Medium.woff) format("woff")
    }

    @font-face {
        font-display: swap;
        font-family: Beausite Classic;
        font-style: italic;
        font-weight: 500;
        src: url(BeausiteClassic-MediumItalic.woff2) format("woff2"), url(BeausiteClassic-MediumItalic.woff) format("woff")
    }

    @font-face {
        font-display: swap;
        font-family: Beausite Classic;
        font-style: normal;
        font-weight: 600;
        src: url(BeausiteClassic-Semibold.woff2) format("woff2"), url(BeausiteClassic-Semibold.woff) format("woff")
    }

    @font-face {
        font-display: swap;
        font-family: Beausite Classic;
        font-style: italic;
        font-weight: 600;
        src: url(BeausiteClassic-SemiboldItalic.woff2) format("woff2"), url(BeausiteClassic-SemiboldItalic.woff) format("woff")
    }

    @font-face {
        font-display: swap;
        font-family: Speckless;
        font-style: normal;
        font-weight: 400;
        src: url(Speckless-Regular.woff2) format("woff2"), url(Speckless-Regular.woff) format("woff")
    }

    @font-face {
        font-display: swap;
        font-family: Speckless;
        font-style: italic;
        font-weight: 400;
        src: url(Speckless-RegularItalic.woff2) format("woff2"), url(Speckless-RegularItalic.woff) format("woff")
    }

    @font-face {
        font-display: swap;
        font-family: Greet Narrow;
        font-style: normal;
        font-weight: 600;
        src: url(GreetNarrow-SemiBold.woff2) format("woff2"), url(resources/fonts/GreetNarrow-SemiBold.woff) format("woff")
    }

    @font-face {
        font-display: swap;
        font-family: Greet Narrow;
        font-style: italic;
        font-weight: 600;
        src: url(GreetNarrow-SemiBoldItalic.woff2) format("woff2"), url(GreetNarrow-SemiBoldItalic.woff) format("woff")
    }
}

@layer elements {

    .cmp-page__skiptomaincontent-link,
    .cmp-page__skiptomaincontent>a,
    .e-cta {
        --_text-color: var(--color-on-primary);
        --_background-color: var(--color-primary);
        --_border-color: var(--_background-color);
        background-color: var(--_background-color) !important;
        border: 1px solid var(--_border-color) !important;
        color: var(--_text-color) !important;
        display: inline-flex;
        font-family: var(--font-body) !important;
        font-size: var(--font-size-eyebrow-small);
        font-size: var(--font-size-eyebrow-small) !important;
        font-weight: var(--font-weight-semibold);
        justify-content: center;
        letter-spacing: var(--font-letter-spacing-loose);
        line-height: var(--font-line-height-3xtight);
        line-height: var(--font-line-height-3xtight) !important;
        max-inline-size: max-content;
        padding-block: var(--spacing-16) !important;
        padding-inline: var(--spacing-24) !important;
        text-align: center;
        text-decoration: none !important;
        text-transform: uppercase;
        text-transform: uppercase !important
    }

    @media(hover:hover) {

        .cmp-page__skiptomaincontent-link:hover,
        .cmp-page__skiptomaincontent>a:hover,
        .e-cta:hover {
            box-shadow: inset 0 0 0 1px var(--_border-color)
        }

        [data-theme^=ets] .cmp-page__skiptomaincontent-link:hover,
        [data-theme^=ets] .cmp-page__skiptomaincontent>a:hover,
        [data-theme^=ets] .e-cta:hover {
            --_text-color: var(--brand-eggshell);
            --_background-color: var(--brand-midnight);
            --_border-color: var(--brand-midnight)
        }

        [data-theme^=toefl] .cmp-page__skiptomaincontent-link:hover,
        [data-theme^=toefl] .cmp-page__skiptomaincontent>a:hover,
        [data-theme^=toefl] .e-cta:hover {
            --_text-color: var(--color-on-surface);
            --_background-color: var(--color-surface);
            --_border-color: var(--color-on-surface)
        }
    }

    .cmp-page__skiptomaincontent-link--secondary,
    .cmp-page__skiptomaincontent>a--secondary,
    .e-cta--secondary {
        --_border-color: var(--color-outline-variant);
        background-color: transparent !important;
        color: var(--color-on-surface) !important
    }

    @media(hover:hover) {

        .cmp-page__skiptomaincontent-link--secondary:hover,
        .cmp-page__skiptomaincontent>a--secondary:hover,
        .e-cta--secondary:hover {
            --_border-color: currentcolor
        }

        [data-theme*=dark] .cmp-page__skiptomaincontent-link--secondary:hover,
        [data-theme*=dark] .cmp-page__skiptomaincontent>a--secondary:hover,
        [data-theme*=dark] .e-cta--secondary:hover {
            --_border-color: var(--color-outline-highlight)
        }
    }

    .cmp-page__skiptomaincontent-link--tertiary,
    .cmp-page__skiptomaincontent>a--tertiary,
    .e-cta--tertiary {
        background-color: transparent !important;
        border-color: transparent !important;
        color: var(--color-on-surface) !important
    }

    @media(hover:hover) {

        .cmp-page__skiptomaincontent-link--tertiary:hover,
        .cmp-page__skiptomaincontent>a--tertiary:hover,
        .e-cta--tertiary:hover {
            box-shadow: unset;
            text-decoration: underline !important;
            text-underline-offset: .1em
        }
    }

    [data-theme^=toefl] .cmp-page__skiptomaincontent-link--lowercase,
    [data-theme^=toefl] .cmp-page__skiptomaincontent>a--lowercase,
    [data-theme^=toefl] .e-cta--lowercase {
        text-transform: none !important
    }

    .cmp-page__skiptomaincontent,
    .cmp-page__skiptomaincontent-link,
    .cmp-page__skiptomaincontent>a,
    .e-cta--skip {
        inset-block-start: var(--spacing-8) !important;
        inset-inline-start: var(--spacing-8) !important;
        position: fixed !important;
        z-index: calc(var(--z-nav) + 1) !important
    }

    .cmp-page__skiptomaincontent-link:not(:focus),
    .cmp-page__skiptomaincontent>a:not(:focus),
    .e-cta--skip:not(:focus) {
        -webkit-clip-path: inset(50%) !important;
        clip-path: inset(50%) !important;
        height: 1px !important;
        overflow: hidden !important;
        position: absolute !important;
        white-space: nowrap !important;
        width: 1px !important
    }
}

@layer utils {

    .cmp-link__screen-reader-only:not(:focus):not(:active),
    .u-visuallyhidden:not(:focus):not(:active) {
        -webkit-clip-path: inset(50%);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px
    }

    .e-cta--lowercase {
        text-transform: none !important
    }
}

@layer components {
    .c-toggle-switch {
        align-items: center;
        display: flex
    }

    .c-toggle-switch__container {
        background-color: transparent;
        border-radius: var(--spacing-20);
        cursor: pointer;
        height: var(--spacing-16);
        margin-right: var(--spacing-8);
        position: relative;
        width: var(--spacing-28)
    }

    .c-toggle-switch__container__toggle-track {
        border: 1px solid;
        border-radius: var(--spacing-20);
        height: 100%;
        transition: background-color .3s;
        width: 100%
    }

    .c-toggle-switch__container__toggle-track.checked .c-toggle-switch__container__toggle-track__toggle-thumb {
        border: 1px solid;
        left: calc(100% - .9rem)
    }

    .c-toggle-switch__container__toggle-track__toggle-thumb {
        border: 1px solid;
        border-radius: 50%;
        height: var(--spacing-12);
        left: 2px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        transition: left .3s;
        width: var(--spacing-12)
    }

    .c-toggle-switch__label {
        font-size: var(--font-size-small)
    }
}