@layer components {

    /* ── Marketing footer ───────────────────────────────────────────
     Five-column layout on wide viewports (brand + 4 link columns),
     collapses to 2 columns on narrow. Dark surface. */
    .c-footer {
        border-top: 1px solid var(--color-line);
        /* Use the stable inverse-surface semantic token — it's bound
           directly to a primitive in core/brand so the
           [data-surface="dark"] inversion rule cannot remap it. Each
           host's brand layer rebinds --color-surface-inverse to its
           own dark primitive (e.g. AD → --ad-ink-950). */
        background: var(--color-surface-inverse);
        color: var(--color-on-dark);
    }

    .c-footer__inner {
        max-width: 80rem;
        margin-inline: auto;
        padding: var(--space-9) var(--space-7) var(--space-7);
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
        gap: var(--space-8);
    }

    @media (max-width: 900px) {
        .c-footer__inner {
            grid-template-columns: 1fr 1fr;
            gap: var(--space-7);
            padding-inline: var(--space-5);
        }
    }

    .c-footer__brand p {
        color: rgb(250 249 245 / .6);
        font-size: var(--fs-ui);
        max-width: 30ch;
        margin-top: var(--space-5);
    }

    .c-footer__col h5 {
        font-size: var(--fs-caption, 0.6875rem);
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: rgb(250 249 245 / .5);
        margin-bottom: var(--space-5);
        font-weight: 500;
    }

    .c-footer__col a {
        display: block;
        color: var(--color-on-dark);
        text-decoration: none;
        font-size: var(--fs-ui);
        padding: var(--space-1) 0;
        transition: color var(--dur-fast) var(--ease);
    }

    .c-footer__col a:hover {
        color: var(--color-accent-soft);
    }

    /* Legal/privacy tag helpers render inside <div class="app-footer-legal">,
       which gets flex-row layout from the legacy RCL stylesheet. Override
       here so inside the marketing footer each .app-footer-legal-element
       stacks on its own line and picks up the column link styling. */
    .c-footer .app-footer-legal {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: 0;
        width: auto;
    }

    .c-footer .app-footer-legal .app-footer-legal-element {
        margin-left: 0;
        margin-right: 0;
    }

    .c-footer .app-footer-legal .app-footer-legal-element a {
        display: block;
        color: var(--color-on-dark);
        text-decoration: none;
        font-size: var(--fs-ui);
        padding: var(--space-1) 0;
        transition: color var(--dur-fast) var(--ease);
    }

    .c-footer .app-footer-legal .app-footer-legal-element a:hover {
        color: var(--color-accent-soft);
    }

    .c-footer__bottom {
        max-width: 80rem;
        margin-inline: auto;
        padding: var(--space-6) var(--space-7);
        border-top: 1px solid rgb(250 249 245 / .1);
        display: flex;
        justify-content: space-between;
        font-size: var(--fs-caption);
        color: rgb(250 249 245 / .5);
        flex-wrap: wrap;
        gap: var(--space-4);
    }

    @media (max-width: 900px) {
        .c-footer__bottom { padding-inline: var(--space-5); }
    }

    /* ── Follow rail ─────────────────────────────────────────────
       Social-follow strip rendered by the <app-follow /> tag helper.
       Surface-agnostic: uses the flipping semantic tokens (--color-ink,
       --color-line) rather than hardcoded on-dark values, so the same
       component reads correctly on a light page AND inside a dark
       [data-surface="dark"] ancestor (which is where it currently
       lives — above the copyright row inside the footer). Hover fill
       uses the stable --color-on-surface-inverse so the icon stays
       paper-toned on the accent-green bubble regardless of surface. */
    .c-follow {
        max-width: 80rem;
        margin-inline: auto;
        padding: var(--space-6) var(--space-7);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-3);
        border-top: 1px solid var(--color-line);
    }

    @media (max-width: 900px) {
        .c-follow { padding-inline: var(--space-5); }
    }

    .c-follow__label {
        font-family: var(--font-display);
        font-weight: 500;
        font-size: var(--fs-body-sm);
        letter-spacing: -0.01em;
        color: var(--color-ink);
        margin-right: var(--space-3);
    }

    .c-follow__link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 50%;
        color: var(--color-ink);
        background: transparent;
        border: 1px solid var(--color-line);
        text-decoration: none;
        font-size: var(--fs-body);
        transition: color var(--dur-fast) var(--ease),
                    border-color var(--dur-fast) var(--ease),
                    background var(--dur-fast) var(--ease),
                    transform var(--dur-fast) var(--ease);
    }

    .c-follow__link:hover,
    .c-follow__link:focus-visible {
        color: var(--color-on-surface-inverse);
        background: var(--color-accent);
        border-color: var(--color-accent);
        transform: translateY(-1px);
        outline: none;
    }

    .c-follow__link:focus-visible {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 30%, transparent);
    }
}