.hero {
    position: relative;
    min-height: 55vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    & .hero__content {
        z-index: 2;
        text-align: center;
        max-width: 900px;
        padding-inline: var(--pico-block-spacing-horizontal);
    }

    & .hero__title {
        font-size: 3.5rem;
        margin-bottom: 1rem;
        background: linear-gradient(90deg, #60a5fa, #c084fc);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    & .hero__subtitle {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }

    & .hero__canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .hero__buttons {
        display: flex;
        gap: 1rem;
        justify-content: center;
        flex-wrap: wrap;
    }
}

.feature-section {
    padding: 4rem 0;

    & h2 {
        margin-bottom: 4rem;
        text-align: center;
    }
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(300px, 100%/4), 1fr));
    gap: calc(var(--pico-grid-column-gap) * 2);
}

.pricing {
    padding: 4rem 0;

    & .pricing__grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: calc(var(--pico-grid-column-gap) * 2);

        @media (max-width: 1030px) {
            grid-template-columns: 100%;
        }

        & article {
            display: flex;
            flex-direction: column;
            padding: 0;

            & > header,
            & > main {
                padding: 2rem;
                margin: 0;
            }

            & > a {
                margin: 2rem;
            }

            & .pricing__month {
                font-size: 2.5rem;
                font-weight: 700;
            }

            & .pricing__year {
                margin-top: -1rem;
                font-style: italic;
                display: none;
            }

            &:has(#pricing__toggle-yearly:checked) .pricing__year {
                display: block;
            }

            & > main {
                flex: 1;
                padding-bottom: var(--pico-block-spacing-vertical);
            }
        }
    }
}

.faq {
    dl {
        margin: calc(var(--pico-block-spacing-vertical) * 3) 0;

        & dt {
            /* h4 */
            font-size: 1.25rem;
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: 0.5rem;
        }

        & dd {
            margin: 0;
        }
    }
}