@layer components {
    body {
        background: url('/assets/img/gradient-76b2352805fda91d776c3130a1c2b3679b457fb542cdc5247758aff99d7f1720.webp');
        background-position: center top;
        background-size: max(100vw, 100rem);
        background-repeat: no-repeat;
    }

    .landing-topline {
        text-align: center;
        font-weight: 300;
        opacity: .85;
        margin-top: var(--space-small);
        font-size: var(--font-size-small);

        a {
            color: white;
            text-decoration: none;
            &:not(:first-child) {
                margin-left: var(--space-medium);
            }
        }
    }

    .landing-headline {
        font-family: "David Libre";
        text-align: center;
        color: white;
        h1 {
            font-size: 250%;
        }
        h2 {
            font-size: var(--font-size-large);
        }
        @media(width < 70ch) {
            font-size: var(--font-size-x-small);
        }
    }
    .video-card {
        display: flex;
        flex-direction: column;
        gap: var(--space-neutral);

        .text {
            text-align: center;
        }
        .media {
            video {
                clip-path: inset(2px);
            }
        }
    }

    .landing-item {
        max-width: 80rem;
        width: 100%;
        margin-inline: auto;
    }

    .landing-main {
        display: flex;
        flex-direction: column;
        font-family: "Bricolage Grotesque";
        margin-top: 0;
        h2 {
            font-size: var(--font-size-large);
            text-align: center;
        }

        dialog[open] {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            align-items: center;

            /* position: relative; */

            .dialog-close {
                position: sticky;
                top: 0;
                margin-left: auto;
            }
        }
    }

    .pitch {
        border-left: .5ch solid;
        border-image: linear-gradient(to top, #651b98, #ae51a1) 1;
        padding-left: 2ch;
        margin-inline: auto;
        width: fit-content;
        text-align: left !important;
    }

    .grid-container {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(3, 1fr);

        gap: 1px;
        background-color: var(--color-border);
        overflow: hidden;
        padding: 0;
        font-size: var(--font-size-xx-small);
        @media(width < 100ch) {
            grid-template-columns: 0 repeat(4, 1fr) 0;
        }
        @media(width < 65ch) {
            grid-template-columns: 0 0 repeat(2, 1fr) 0 0;
        }
    }

    .example-panels {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-x-small);
    }

    .example-panel {
        width: 20ch;
        display: flex;
        flex-direction: column;
        gap: var(--space-small);
        h3 {
            font-size: 75%;
            font-weight: bold;
            text-align: center;
        }
        margin-inline: auto;
    }

    .example-panel code {
        font-family: monospace;
        color: white;
        background: oklch(27.8% 0.033 256.848);
        display: block;
        font-size: var(--font-size-xx-small);
        flex-grow: 1;
        user {
            color: oklch(76.5% 0.177 163.223);
        }
        tilde {
            color: oklch(71.4% 0.203 305.504);
        }
    }

    .tile {
        aspect-ratio: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        transition: all 0.2s ease-in-out;
        cursor: pointer;
        text-decoration: none;
        position: relative;
        background: white;
        overflow: hidden;
    }

    /* --- Soft Background Gradients --- */
    .tile.grad-reply { background: linear-gradient(145deg, oklch(0.9725 0.0322 201.38) 0%, oklch(0.8975 0.0603 232.51) 100%); }
    .tile.grad-comment { background: linear-gradient(145deg, oklch(0.9455 0.0846 94.47) 0%, oklch(0.9386 0.036563 55.3623) 100%); }
    .tile.grad-video { background: linear-gradient(145deg, oklch(0.6737 0.193 312.38) 0%, oklch(0.7759 0.1149 257.59) 100%); }
    .tile.grad-warmup { background: linear-gradient(145deg, oklch(0.905 0.052 3.25) 0%, oklch(0.7215 0.1501 8.02) 100%); }
    .tile.grad-feed { background: linear-gradient(145deg, oklch(0.9748 0.0368 161.57) 0%, oklch(0.7082 0.1322 313.35) 100%); }
    .tile.grad-target { background: linear-gradient(145deg, oklch(0.9612 0.0516 144.3) 0%, oklch(0.8826 0.1351 141.83) 100%); }

    .tile:hover {
        background: #f9f9ff !important;
        z-index: 2;
        box-shadow: inset 0 0 0 1.5px var(--accent-color), 0 10px 25px -5px rgba(0,0,0,0.05);
    }

    .tile i {
        margin-bottom: 16px;
        color: var(--text-sub);
        transition: transform 0.3s ease, color 0.2s ease;
    }

    .tile:hover i {
        color: var(--accent-color);
        transform: translateY(-3px);
    }

    .tile span {
        color: var(--text-main);
        line-height: 1.4;
    }

    .waitlist {
        font-size: var(--font-size-small);
        outline: none;
        display: flex;
        flex-direction: column;
        padding: 1em;
        gap: var(--space-medium);
        font-weight: 600;

        &:has(form) {
            max-width: 30ch;
        }

        h2 {
            font-size: var(--font-size-xx-small);
            display: flex;
            flex-direction: row;
            align-items: center;

            launch-badge {
                border-radius: var(--border-radius);
                background: oklch(96.2% 0.044 156.743);
                color: oklch(50.8% 0.118 165.612);
                padding: .5ch;
                padding-inline: 1ch;
                width: fit-content;
            }

            form {
                margin-left: auto;
                opacity: .5;
            }
        }

        h4 {
            font-weight: bold;
        }

        form label {
            font-size: var(--font-size-xxx-small);
            font-weight: 600;

            input, .input {
                font-size: var(--font-size-medium);
                margin-top: var(--space-xx-small);
            }
        }
    }

    .cal {
        max-width: 80rem;
        width: 100%;
        padding-top: var(--space-neutral);
    }

    .socials {
        text-align: center;
        h3 {
            margin-top: var(--space-small);
            font-size: 200%;
        }
    }
}