/* Shared identity for the landing page, public pages and application shell. */
:root {
    --brand-ink: #2f222e;
    --brand-muted: #675b65;
    --brand-accent: #9c4562;
    --brand-accent-hover: #7d334d;
    --brand-accent-active: #60273c;
    --brand-blush: #f4dfe5;
    --brand-soft: #fcf5f7;
    --brand-cream: #fffaf7;
    --brand-control-border: #cbb9c0;
    --brand-control-radius: .85rem;
    --brand-font-heading: Georgia, "Times New Roman", serif;
    --brand-font-body: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 10px;
    width: fit-content;
    color: #43213f;
    font-family: var(--brand-font-body);
    font-size: 21px;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -0.04em;
    text-decoration: none;
    white-space: nowrap;
}
.brand:hover { color: #43213f; text-decoration: none; }
.brand:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: 5px; border-radius: 6px; }
.brand-mark { display: block; width: 44px; height: 44px; flex-shrink: 0; }
.brand-dot { color: var(--brand-accent); }
.site-home-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    color: var(--brand-accent);
    font: 600 .875rem/1.4 var(--brand-font-body);
    text-decoration: none;
    white-space: nowrap;
}
.site-home-link svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.site-home-link:hover { color: var(--brand-accent-hover); text-decoration: underline; text-underline-offset: .2em; }
.site-home-link:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: 4px; border-radius: 4px; }
.public-navigation { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: .75rem 1.5rem; }
.public-navigation .app-return {
    gap: .6rem;
    padding: .6rem 1rem;
    border-radius: var(--brand-control-radius);
    background: var(--brand-accent);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}
.public-navigation .app-return:hover { background: var(--brand-accent-hover); color: #fff; }
@media (max-width: 600px) {
    .site-header:has(.public-navigation), .business-header { flex-wrap: wrap; padding-block: 1rem; gap: .5rem; }
    .public-navigation { width: 100%; justify-content: space-between; gap: .5rem 1rem; }
}
@media (max-width: 480px) {
    .brand { gap: 8px; font-size: 18px; }
    .brand-mark { width: 36px; height: 36px; }
}