@layer components {
    .site-footer {
        /* Footer is always "dark mode", regardless of the page's color scheme — common pattern,
           reads as a confident brand close rather than just "end of content". */
        --color-surface: var(--clr-slate-950);
        --color-text: var(--clr-slate-50);
        --color-text-muted: var(--clr-slate-300);
        --color-border: var(--clr-slate-700);

        background: var(--color-surface);
        color: var(--color-text);
        padding: var(--space-l) var(--space-s);

        & .site-footer__row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-m);
            max-width: 68rem;
            margin-inline: auto;
        }

        & .site-footer__nav {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-m);

            & a {
                color: var(--color-text-muted);
                text-decoration: none;
                font-weight: 500;
                transition: color 0.2s var(--ease-out);

                &:hover {
                    color: #ffffff;
                }
            }
        }

        & .site-footer__meta {
            display: flex;
            align-items: center;
            gap: var(--space-s);
        }

        & .site-footer__billing {
            max-width: 68rem;
            margin-inline: auto;
            margin-block-start: var(--space-m);
            padding-block-start: var(--space-s);
            border-block-start: 1px solid var(--color-border);
            color: var(--color-text-muted);
            font-size: 0.85rem;

            & .site-footer__billing-title {
                font-weight: 600;
            }
        }

        & .site-footer__contact {
            color: var(--color-text-muted);
            text-decoration: none;

            &:hover {
                color: #ffffff;
            }
        }
    }
}