@layer components {
    /*
     * The landing page, adapted from recenzovac's. The rule that keeps it together: prose has one
     * measure (`--home-measure`), the layout another (`--home-column`). A sentence running the full
     * width of a wide monitor is unreadable no matter how modern the grid around it looks.
     */
    .home {
        --home-column: 72rem;
        --home-measure: 36rem;
        --home-gutter: clamp(var(--space-m), 4vw, var(--space-xl));

        margin-inline: auto;
        max-inline-size: var(--home-column);
        padding-inline: var(--home-gutter);
    }

    .home__bar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-s) var(--space-l);
        padding-block: var(--space-l);
    }

    .home__brand {
        font-family: var(--font-display);
        font-variation-settings: 'opsz' 20;
        font-size: var(--text-l);
        font-weight: 650;
        color: inherit;
        text-decoration: none;
    }

    .home__nav {
        display: flex;
        gap: var(--space-m);
        margin-inline-start: auto;
        font-size: var(--text-s);

        & a {
            color: var(--color-text-muted);
            text-decoration: none;
        }

        & a:hover {
            color: var(--color-text);
        }

        /* On a phone the anchors would push the sign-in button onto a third row of chrome. */
        @media (max-width: 34rem) {
            display: none;
        }
    }

    @media (max-width: 34rem) {
        .home__bar-cta {
            margin-inline-start: auto;
        }
    }

    .home__hero {
        padding-block: clamp(var(--space-xl), 7vh, 5rem) 0;
    }

    .home__eyebrow,
    .home__kicker {
        margin: 0 0 var(--space-s);
        color: var(--color-accent);
        font-size: var(--text-s);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.12em;
    }

    .home__title {
        margin: 0;
        font-size: var(--text-display);
        font-variation-settings: 'opsz' 100;
        letter-spacing: -0.03em;

        & em {
            font-style: italic;
            color: var(--color-accent);
        }
    }

    .home__lead,
    .home__section-lead {
        margin: var(--space-l) 0 0;
        max-inline-size: var(--home-measure);
        color: var(--color-text-muted);
        font-size: var(--text-lead);
    }

    .home__cta {
        margin-block-start: var(--space-xl);
    }

    .home__button {
        min-block-size: 3.5rem;
        padding-inline: var(--space-xl);
        border: 0;
        border-radius: var(--radius-full);
        background-color: var(--color-accent);
        color: var(--color-accent-contrast);
        font-weight: 600;
        cursor: pointer;
    }

    .home__button--ghost {
        min-block-size: 2.5rem;
        padding-inline: var(--space-m);
        border: 1px solid var(--color-border);
        background-color: transparent;
        color: var(--color-text);
        font-size: var(--text-s);
    }

    .home__cta-note {
        margin: var(--space-m) 0 0;
        max-inline-size: var(--home-measure);
        color: var(--color-text-muted);
        font-size: var(--text-s);

        & a {
            color: inherit;
        }
    }

    .home__section {
        padding-block-start: var(--space-2xl);
    }

    .home__section-title {
        margin: 0;
        max-inline-size: 24ch;
        font-size: var(--text-title);
    }

    /* Numbered by a counter: the number is display type, part of the look. */
    .home__steps {
        counter-reset: step;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-l);
        margin: var(--space-xl) 0 0;
        padding: 0;
        list-style: none;

        @media (max-width: 34rem) {
            grid-template-columns: minmax(0, 1fr);
        }

        @media (min-width: 60rem) {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
    }

    .home__step {
        counter-increment: step;
        padding-block-start: var(--space-m);
        border-block-start: 2px solid var(--color-border);

        & p + p {
            margin: var(--space-2xs) 0 0;
            color: var(--color-text-muted);
            font-size: var(--text-s);
        }
    }

    .home__step::before {
        content: counter(step);
        display: block;
        font-family: var(--font-display);
        font-size: var(--text-section);
        color: var(--color-accent);
        line-height: 1.1;
    }

    .home__step-kicker {
        margin: 0;
        font-weight: 650;
    }

    .home__facts {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
        gap: var(--space-l) var(--space-2xl);
        margin: var(--space-xl) 0 0;
        max-inline-size: 58rem;
    }

    .home__fact {
        padding-block-start: var(--space-m);
        border-block-start: 1px solid var(--color-border);

        & dt {
            font-family: var(--font-display);
            font-weight: 650;
        }

        & dd {
            margin: var(--space-2xs) 0 0;
            color: var(--color-text-muted);
            font-size: var(--text-s);
        }

        & code {
            padding: 0.1em 0.35em;
            border-radius: var(--radius-s);
            background-color: var(--color-sunken);
            font-family: var(--font-mono);
            font-size: 0.875em;
        }
    }

    .home__closing {
        margin-block-start: var(--space-2xl);
        padding: var(--space-2xl) var(--home-gutter);
        border-radius: var(--radius-l);
        background-color: var(--color-sunken);
        text-align: center;
    }

    .home__closing-line {
        margin: 0 auto;
        max-inline-size: 24ch;
        font-size: var(--text-section);
    }

    .home__closing .home__cta {
        margin-block-start: var(--space-l);
    }
}