@layer components {
    .cta-band__inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 40px 72px;
    }

    .cta-band__text {
        display: flex;
        flex: 1 1 520px;
        flex-direction: column;
        gap: 22px;
        max-width: 680px;
    }

    .contact-aside {
        --line: var(--color-slate-line);
        display: flex;
        flex: 0 1 380px;
        flex-direction: column;
        gap: 18px;
        min-width: 0;
        padding: clamp(24px, 3vw, 32px);
        border-radius: var(--radius-panel);
        background: var(--color-slate);
    }

    .contact-aside__person {
        display: flex;
        flex-direction: column;
        line-height: 1.4;
    }

    .contact-aside__name {
        font-size: 20px;
        font-weight: 600;
    }

    .contact-aside__role {
        color: var(--fg-muted);
        font-size: 15px;
    }

    .contact-aside .checklist {
        color: var(--fg-muted);
        font-size: 15px;
    }

    .person-card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        max-width: 460px;
        padding: 16px 20px;
        border: 1px solid var(--color-line);
        border-radius: 16px;
        background: var(--color-page);
        line-height: 1.45;
    }

    .person-card__name {
        font-weight: 600;
    }

    .person-card__role {
        color: var(--fg-muted);
        font-size: 15px;
    }

    .dark .person-card {
        max-width: none;
        border: 0;
        background: var(--color-slate);
        line-height: 1.4;
    }

    .dark .person-card__name {
        font-size: 18px;
    }
}