.hero-content h1 {
    margin-bottom: 20px;

    line-height: 1.1;

    font-size: clamp(36px, 5vw, 56px);

    font-weight: 700;

    color: #0f172a;

    letter-spacing: -0.025em;
}

button.header-center-box {
    --lightning-charge-opacity: 0;
    --lightning-charge-secondary-opacity: 0;
    --lightning-charge-ring: none;
    --lightning-charge-outline: rgb(148 163 184 / 22%);
    --lightning-logo-brightness: 1;
    --lightning-logo-scale: 1;

    border: 0;

    padding: 0;

    color: inherit;
    font: inherit;

    cursor: pointer;

    isolation: isolate;

    position: relative;

    appearance: none;
    -webkit-appearance: none;
    touch-action: manipulation;
    -webkit-touch-callout: none;
}

button.header-center-box::before,
button.header-center-box::after {
    border-radius: inherit;

    content: "";

    opacity: 0;

    pointer-events: none;

    position: absolute;
    z-index: 0;

    transition: opacity 120ms ease-out;
}

button.header-center-box::before {
    background: var(--lightning-charge-ring);

    inset: -7px;

    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000000 calc(100% - 2.2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000000 calc(100% - 2.2px));
}

button.header-center-box::after {
    border: 1px solid var(--lightning-charge-outline);

    inset: -9px;

    transform: scale(0.94);
}

button.header-center-box.is-lightning-pressing::before {
    opacity: var(--lightning-charge-opacity);
}

button.header-center-box.is-lightning-pressing::after {
    opacity: var(--lightning-charge-secondary-opacity);

    transform: scale(1);

    transition: opacity 120ms ease-out, transform 240ms ease-out;
}

button.header-center-box.is-lightning-fully-charged::after {
    opacity: 0.9;

    animation: lightning-charge-pulse 420ms ease-in-out infinite alternate;
}

.header-center-box > img {
    display: block;

    pointer-events: none;

    position: relative;
    z-index: 1;
}

.header-center-box.is-lightning-pressing > img {
    filter: brightness(var(--lightning-logo-brightness));

    transform: scale(var(--lightning-logo-scale));
}

.header-center-box:focus-visible {
    outline: 4px solid rgb(53 182 130 / 34%);
    outline-offset: 4px;
}

.header-center-box.is-lightning-charging > img {
    animation: lightning-logo-charge 220ms ease-out both;
}

.home-lightning-layer {
    pointer-events: none;

    position: fixed;
    inset: 0;
    z-index: 9216;

    overflow: hidden;
}

.home-lightning-canvas,
.home-lightning-fragments {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
}

.home-lightning-canvas {
    z-index: 2;
}

.home-lightning-fragments {
    z-index: 1;
}

.home-lightning-fragment {
    pointer-events: none;

    position: fixed;

    overflow: hidden;

    contain: layout paint style;
    will-change: transform;
}

.home-lightning-fragment-copy {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;

    transform: none !important;
}

.is-lightning-fractured {
    visibility: hidden !important;
}

@keyframes lightning-logo-charge {
    0%, 100% {
        filter: brightness(1);

        transform: scale(1);
    }

    48% {
        filter: brightness(1.18);

        transform: scale(0.96);
    }
}

@keyframes lightning-charge-pulse {
    from {
        transform: scale(0.98);
    }

    to {
        transform: scale(1.04);
    }
}

.hero-underline {
    position: relative;

    isolation: isolate;

    display: inline-block;
}

.hero-subtitle .hero-underline {
    white-space: nowrap;
}

.hero-title-text {
    max-width: 100%;

    background: linear-gradient(270deg, #ff0000, #ff9900, #ffff00, #33cc33, #3399ff, #9900ff, #ff0099, #ff0000);
    background-size: 400% 400%;
    background-clip: text;

    color: transparent;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    display: inline-block;

    animation: rainbow 8s ease infinite;
}

.hero-underline::after {
    border-radius: 999px;

    height: 0.12em;

    background: linear-gradient(
            90deg,
            rgb(242 153 74 / 0%),
            rgb(242 153 74 / 34%),
            rgb(53 182 130 / 24%),
            rgb(242 153 74 / 0%)
    );

    content: "";

    position: absolute;
    right: -0.08em;
    bottom: -0.04em;
    left: -0.08em;
    z-index: -1;

    opacity: 0.72;

    transform: scaleX(0.92) rotate(-0.6deg);
    transform-origin: center;

    transition: opacity 280ms ease, transform 280ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .hero:hover .hero-underline::after {
        opacity: 1;

        transform: scaleX(1) rotate(-0.6deg);
    }

}

.hero-subtitle {
    min-width: 240px;
    max-width: 1160px;

    margin-inline: auto;

    line-height: 1.6;

    color: #475569;

    font-size: 20px;
}

.hero-test-links {
    --hero-test-links-duration: 42s;
    --hero-test-links-gap: 12px;

    width: min(100%, 780px);

    margin: 18px auto 0;

    display: block;

    position: relative;

    text-align: left;
}

.hero-test-links-viewport {
    width: 100%;
    min-width: 0;

    overflow: hidden;

    position: relative;

    -webkit-mask-image: linear-gradient(
            90deg,
            transparent,
            #000000 5%,
            #000000 95%,
            transparent
    );
    mask-image: linear-gradient(
            90deg,
            transparent,
            #000000 5%,
            #000000 95%,
            transparent
    );
}

.hero-test-links-viewport::before,
.hero-test-links-viewport::after {
    content: "";

    pointer-events: none;

    position: absolute;
    z-index: 0;
}

.hero-test-links-viewport::before {
    background-color: #fbfaf6;

    opacity: 0.78;

    inset: 4px 0 5px;

    clip-path: polygon(
            0 17%,
            8% 8%,
            28% 13%,
            47% 5%,
            72% 11%,
            94% 4%,
            100% 20%,
            98% 86%,
            79% 94%,
            53% 89%,
            31% 96%,
            7% 90%,
            0 76%
    );
}

.hero-test-links-viewport::after {
    width: 100%;
    height: 12px;

    background: url("../images/other/test-art-title.svg") center / 100% 100% no-repeat;

    opacity: 0.16;

    left: 0;
    bottom: 3px;
}

.hero-test-links-marquee {
    width: max-content;

    display: flex;

    animation: hero-test-links-scroll var(--hero-test-links-duration) linear infinite;

    backface-visibility: hidden;

    position: relative;
    z-index: 1;

    transform: translate3d(0, 0, 0);

    will-change: transform;
}

.hero-test-links-track {
    width: max-content;

    padding: 5px var(--hero-test-links-gap) 7px 0;

    display: flex;
    align-items: center;

    gap: var(--hero-test-links-gap);

    flex: none;
}

.hero-test-links-track a {
    --hero-test-link-art: none;
    --hero-test-link-wash: #f4efe6;
    --hero-test-link-shape: polygon(
            2% 18%,
            10% 7%,
            90% 4%,
            100% 25%,
            96% 85%,
            76% 96%,
            7% 91%,
            0 68%
    );

    min-height: 72px;

    padding: 5px 15px 5px 5px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    color: #40504a;

    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;

    isolation: isolate;

    position: relative;

    flex: none;

    touch-action: manipulation;
}

.hero-test-links-track a::before {
    width: 92px;
    height: 56px;

    background: var(--hero-test-link-art) center / contain no-repeat;

    content: "";

    opacity: 0.92;

    flex: 0 0 92px;

    transition: opacity 240ms ease;
}

.hero-test-links-track a::after {
    background-color: var(--hero-test-link-wash);

    content: "";

    opacity: 0.5;

    position: absolute;
    inset: 4px 1px 3px;
    z-index: -1;

    clip-path: var(--hero-test-link-shape);

    transition: opacity 240ms ease;
}

.hero-test-links-track .hero-test-link--reaction {
    --hero-test-link-art: url("../images/other/hero-test-reaction.svg");
    --hero-test-link-wash: #f5eee5;
}

.hero-test-links-track .hero-test-link--aim {
    --hero-test-link-art: url("../images/other/hero-test-aim.svg");
    --hero-test-link-wash: #edf3ee;
}

.hero-test-links-track .hero-test-link--stroop {
    --hero-test-link-art: url("../images/other/hero-test-stroop.svg");
    --hero-test-link-wash: #f7eee0;
    --hero-test-link-shape: polygon(
            4% 8%,
            91% 12%,
            100% 38%,
            96% 88%,
            80% 96%,
            9% 90%,
            0 66%
    );
}

.hero-test-links-track .hero-test-link--sequence {
    --hero-test-link-art: url("../images/other/hero-test-sequence.svg");
    --hero-test-link-wash: #edf0f4;
    --hero-test-link-shape: polygon(
            2% 24%,
            16% 5%,
            94% 9%,
            100% 67%,
            91% 94%,
            8% 87%,
            0 51%
    );
}

.hero-test-links-track .hero-test-link--number {
    --hero-test-link-art: url("../images/other/hero-test-number.svg");
    --hero-test-link-wash: #f4efe6;
    --hero-test-link-shape: polygon(
            6% 12%,
            86% 4%,
            100% 34%,
            95% 87%,
            75% 97%,
            3% 89%,
            0 42%
    );
}

.hero-test-links-track .hero-test-link--tracking {
    --hero-test-link-art: url("../images/other/hero-test-tracking.svg");
    --hero-test-link-wash: #edf3ea;
    --hero-test-link-shape: polygon(
            4% 7%,
            80% 3%,
            97% 19%,
            100% 79%,
            82% 96%,
            10% 91%,
            0 57%
    );
}

.hero-test-links-track a:focus-visible {
    border-radius: 14px;

    outline: 3px solid rgb(35 122 94 / 34%);
    outline-offset: 0;
}

.hero-test-links-track a:focus-visible::after {
    opacity: 0.82;
}

.hero-test-links:focus-within .hero-test-links-marquee {
    animation-play-state: paused;
}

@media (hover: hover) and (pointer: fine) {
    .hero-test-links:hover .hero-test-links-marquee {
        animation-play-state: paused;
    }

    .hero-test-links-track a:hover {
        color: #175f49;
    }

    .hero-test-links-track a:hover::before {
        opacity: 1;
    }

    .hero-test-links-track a:hover::after {
        opacity: 0.82;
    }
}

@keyframes hero-test-links-scroll {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-33.3333333333%, 0, 0);
    }
}

@keyframes rainbow {
    0%, 100% {
        background-position: 0 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-center-box.is-lightning-pressing {
        background-color: #fef6e4;
    }

    .header-center-box.is-lightning-pressing::before,
    .header-center-box.is-lightning-pressing::after {
        display: none;

        animation: none;
        transition: none;
    }

    .header-center-box.is-lightning-pressing > img {
        filter: none;

        transform: none;
    }

    .header-center-box.is-lightning-charging {
        background-color: #fef6e4;
    }

    .header-center-box.is-lightning-charging > img {
        animation: none;
    }

    .home-lightning-layer {
        display: none;
    }

    .hero-title-text {
        animation: none;
    }

    .hero-underline::after {
        transition: none;
    }

    .hero-test-links-viewport {
        overflow-x: auto;

        -webkit-mask-image: none;
        mask-image: none;

        scrollbar-width: none;
    }

    .hero-test-links-viewport::-webkit-scrollbar {
        display: none;
    }

    .hero-test-links-marquee {
        animation: none;

        transform: none;

        will-change: auto;
    }

    .hero-test-links-track[aria-hidden="true"] {
        display: none;
    }

    .hero-test-links-track a::before,
    .hero-test-links-track a::after {
        transition: none;
    }
}

/* ✨ */

.language-selector {
    border-radius: 50%;

    width: 36px;
    height: 36px;

    background-color: #f8f8f8;

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

    cursor: pointer;

    position: relative;
}

.language-dropdown {
    border-radius: 24px;

    width: 166px;
    height: auto;

    padding-bottom: 4px;

    background-color: #ffffff;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

    display: none;
    justify-content: center;
    align-items: center;

    cursor: auto;

    position: absolute;
    top: 50px;
    right: 0;

    z-index: 999;
}

.default-language {
    background: linear-gradient(to right, transparent, #e0e0e0 50%, #e0e0e0 50%, transparent);
}

.language-content-box {
    border-radius: 24px;

    width: 158px;
    height: auto;

    background-color: #ffffff;
}

.language-content-box a {
    border-radius: 22px;

    width: 158px;
    height: 44px;

    margin-top: 4px;

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

    color: #000000;

    text-decoration: none;
}

.language-option-box {
    border-radius: 22px;

    width: 158px;
    height: 44px;

    display: flex;
    align-items: center;
}

.language-option-inner-box {
    border-radius: 22px;

    width: 158px;
    height: 44px;

    display: flex;
    align-items: center;
}

.language-code {
    border-radius: 50%;

    width: 32px;
    height: 32px;

    margin-left: 6px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.language-name {
    border-radius: 16px;

    width: 108px;
    height: 32px;

    margin-left: 6px;

    display: flex;
    justify-content: left;
    align-items: center;
}

/* ✨ */

.features h2 {
    margin-bottom: 20px;

    text-align: center;

    font-size: clamp(32px, 4vw, 42px);
    font-weight: 700;
    color: #0f172a;

    letter-spacing: -0.025em;
}

.features-subtitle {
    max-width: 600px;

    margin-bottom: 40px;
    margin-left: auto;
    margin-right: auto;

    line-height: 1.6;

    text-align: center;

    font-size: 20px;
    color: #475569;
    font-weight: 400;
}

.features-grid {
    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 24px;
}

.feature-card {
    border-radius: 24px;

    background: #ffffff;

    padding: 32px 24px;

    text-align: center;

    isolation: isolate;

    box-shadow: none;

    position: relative;
}

.feature-card::before {
    border-radius: inherit;

    background: radial-gradient(220px circle at var(--spotlight-x, -999px) var(--spotlight-y, -999px), rgb(242 153 74 / 82%) 0%, rgb(242 153 74 / 56%) 28%, rgb(53 182 130 / 34%) 48%, transparent 72%);

    content: "";

    opacity: 0;

    padding: 1px;

    pointer-events: none;

    position: absolute;
    inset: 0;
    z-index: 1;

    transition: opacity 180ms ease-out;

    -webkit-mask: linear-gradient(#ffffff 0 0) content-box, linear-gradient(#ffffff 0 0);
    -webkit-mask-composite: xor;

    mask: linear-gradient(#ffffff 0 0) content-box, linear-gradient(#ffffff 0 0);
    mask-composite: exclude;
}

.features-grid.spotlight-active .feature-card::before {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .feature-card::before {
        display: none;

        transition: none;
    }
}

.feature-icon {
    font-size: 40px;

    margin-bottom: 20px;

    display: block;

    opacity: 0.9;
}

.feature-card h3 {
    margin-bottom: 12px;

    font-size: 18px;
    font-weight: 600;

    color: #0f172a;

    letter-spacing: -0.025em;
}

.feature-card p {
    line-height: 1.6;

    font-size: 14px;

    color: #64748b;
}

/* ✨ */

.faq h2 {
    margin-bottom: 40px;

    font-size: 36px;
    font-weight: 700;

    color: #1e293b;
}

.faq-grid {
    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 24px;
}

.faq-pencil-outline {
    width: 100%;
    height: 100%;

    opacity: 0;

    overflow: visible;

    pointer-events: none;

    position: absolute;
    inset: 0;
    z-index: 1;

    transition: opacity 180ms ease-out;

    -webkit-mask-image: radial-gradient(circle var(--faq-outline-reveal-radius, 112px) at var(--faq-spotlight-x, -999px) var(--faq-spotlight-y, -999px), #000000 0%, #000000 42%, transparent 100%);
    -webkit-mask-repeat: no-repeat;

    mask-image: radial-gradient(circle var(--faq-outline-reveal-radius, 112px) at var(--faq-spotlight-x, -999px) var(--faq-spotlight-y, -999px), #000000 0%, #000000 42%, transparent 100%);
    mask-repeat: no-repeat;
}

.faq-pencil-line {
    fill: none;

    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.92;

    stroke-width: 0.82;

    shape-rendering: geometricPrecision;

    vector-effect: non-scaling-stroke;
}

.faq-pencil-line-texture {
    opacity: 0.42;

    stroke-dasharray: 0.8 0.75 5.8 1.25 11 0.9;
    stroke-width: 0.48;
}

.faq-grid.spotlight-active .faq-pencil-outline {
    opacity: 1;
}

.faq-item {
    border-radius: 24px;

    padding: 32px 24px;

    isolation: isolate;

    position: relative;
}

.faq-item h3 {
    margin-bottom: 12px;

    font-size: 18px;
    font-weight: 600;

    color: #1e293b;
}

@media (hover: hover) and (pointer: fine) {
    .faq-item h3,
    .faq-item p {
        background: radial-gradient(
                160px circle at var(--faq-text-spotlight-x, -999px) var(--faq-text-spotlight-y, -999px),
                #237a5e 0%,
                #a95721 42%,
                var(--faq-text-color) 76%
        );

        background-clip: text;

        color: transparent;

        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .faq-item h3 {
        --faq-text-color: #1e293b;
    }

    .faq-item p {
        --faq-text-color: #64748b;
    }
}

.faq-item p {
    line-height: 1.6;

    color: #64748b;
}

@media (prefers-reduced-motion: reduce) {
    .faq-pencil-outline {
        display: none;

        transition: none;
    }

    .faq-item h3,
    .faq-item p {
        background: none;

        -webkit-text-fill-color: currentcolor;
    }
}

/* Test directory */

.main-tests {
    padding: 20px 64px 64px;

    display: block;
}

.test-directory-heading {
    max-width: 720px;

    margin: 0 auto 44px;

    text-align: center;
}

.test-directory-heading h2 {
    width: fit-content;

    margin-bottom: 16px;
    margin-inline: auto;

    color: #0f172a;

    font-size: clamp(32px, 4vw, 42px);
    font-weight: 700;

    letter-spacing: -0.025em;
}

.test-directory-heading p {
    line-height: 1.6;

    color: #475569;

    font-size: 18px;
}

.test-directory-grid {
    border-radius: 24px;

    background: url("../images/other/test-directory-notebook.webp") center / 100% 100% no-repeat;

    padding: 48px 44px 52px;

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 24px 32px;

    position: relative;

    isolation: isolate;

    overflow: hidden;
}

.test-entry-card {
    min-width: 0;
    min-height: 184px;

    padding: 24px 28px;

    display: flex;
    align-items: center;

    background: transparent;

    color: #172033;
    text-decoration: none;

    cursor: pointer;

    position: relative;

    isolation: isolate;

    touch-action: manipulation;
}

.test-entry-copy {
    width: min(72%, 390px);
    min-width: 0;

    padding: 18px 20px 17px;

    display: flex;

    flex-direction: column;

    gap: 10px;

    position: relative;
    z-index: 3;
}

.test-entry-card:nth-child(odd) .test-entry-copy {
    margin-left: auto;
}

.test-entry-copy::before {
    content: "";

    border-radius: 38% 62% 43% 57% / 57% 41% 59% 43%;

    background: radial-gradient(
            ellipse at 38% 48%,
            rgb(255 255 255 / 94%) 0%,
            rgb(255 255 255 / 78%) 56%,
            transparent 78%
    );

    pointer-events: none;

    position: absolute;
    inset: -16px -22px -15px -20px;
    z-index: 0;

    opacity: 0.84;

    transition: opacity 240ms ease;
}

.test-entry-copy strong {
    width: fit-content;

    line-height: 1.15;

    font-size: 25px;

    letter-spacing: -0.025em;

    position: relative;
    z-index: 1;
}

.test-entry-copy strong::after {
    content: "";

    width: calc(100% + 10px);
    height: 10px;

    background: url("../images/other/test-art-title.svg") center / 100% 100% no-repeat;

    pointer-events: none;

    position: absolute;
    bottom: -8px;
    left: -4px;

    opacity: 0.8;

    clip-path: polygon(0 0, 72% 7%, 69% 100%, 0 100%);

    transition: opacity 280ms ease, clip-path 820ms cubic-bezier(0.45, 0, 0.25, 1);
}

.test-entry-copy > span:last-child {
    max-width: 40ch;

    line-height: 1.5;

    color: #526071;

    position: relative;
    z-index: 1;
}

.test-entry-card:focus-visible {
    outline: 4px solid rgb(53 182 130 / 34%);
    outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
    .test-entry-card:hover .test-entry-copy::before {
        opacity: 1;
    }

    .test-entry-card:hover .test-entry-copy strong::after {
        opacity: 1;

        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .test-entry-copy::before,
    .test-entry-copy strong::after {
        transition: none;
    }
}

@media (max-width: 959.98px) {
    .main-tests {
        padding: 20px 48px 48px;
    }

    .test-directory-grid {
        padding: 34px 28px 38px;

        gap: 20px 24px;
    }

    .test-entry-card {
        min-height: 168px;

        padding: 24px;
    }

    .test-entry-copy {
        width: min(74%, 350px);
    }

    .test-entry-copy strong {
        font-size: 22px;
    }

}

@media (max-width: 767.98px) {
    body.test-page,
    body.test-page header,
    body.test-page main,
    body.test-page footer {
        min-width: 0;
    }

    body.test-page .hero {
        min-width: 0;
        max-width: 100%;

        overflow: hidden;
    }

    body.test-page .hero-subtitle {
        min-width: 0;
    }

    .hero-test-links {
        --hero-test-links-duration: 38s;
        --hero-test-links-gap: 10px;

        width: calc(100% + 16px);

        margin-top: 16px;
        margin-right: -8px;
        margin-left: -8px;
    }

    .hero-test-links-viewport {
        -webkit-mask-image: linear-gradient(
                90deg,
                transparent,
                #000000 5%,
                #000000 95%,
                transparent
        );
        mask-image: linear-gradient(
                90deg,
                transparent,
                #000000 5%,
                #000000 95%,
                transparent
        );
    }

    .hero-test-links-track a {
        min-height: 64px;

        padding: 4px 10px 4px 3px;

        font-size: 13px;
    }

    .hero-test-links-track a::before {
        width: 72px;
        height: 48px;

        flex-basis: 72px;
    }

    .main-tests {
        padding: 20px 14px 14px;
    }

    .test-directory-heading {
        margin-bottom: 32px;

        padding: 0 10px;
    }

    .test-directory-heading p {
        font-size: 17px;
    }

    .test-directory-grid {
        border-radius: 18px;

        background-image: url("../images/other/test-directory-notebook-mobile.webp");
        background-position: center top;
        background-size: 100% 100%;

        padding: 20px 14px 24px;

        grid-template-columns: minmax(0, 1fr);

        gap: 8px;
    }

    .test-entry-card {
        min-height: 150px;

        padding: 18px;
    }

    .test-entry-copy {
        width: min(78%, 300px);

        padding: 14px 16px;
    }

}