/* The v2 header brand lockup (the "C4" wordmark from issue #122: dark logo tile + "Quill" beside stacked THERAPY / SOLUTIONS caps), as plain CSS for the non-v2 site — marketing pages and the v1 app nav. Values mirror platformapp/assets/app.css (.quill-logo-box / .quill-brand-name / .quill-brand-caps) with v2's tokens resolved: btn height --size-field*10 = 2.5rem, --radius-field = 0.5rem. Kept separate on purpose: the v2 app stylesheet is never imported outside /v2/, and these rules are never added to it. */

.quill-logo-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    height: 2.5rem;
    padding: 0.25rem;
    border-radius: 0.5rem;
    background-color: #555555;
}
.quill-logo-box img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}
.quill-brand-name {
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #555555;
}
.quill-brand-caps {
    display: flex;
    flex-direction: column;
    font-family: 'Inter', sans-serif;
    font-size: 0.52rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #AAAAAA;
}

/* ---- Brand colors on the top-nav buttons (issue #211 review round 2): only the background colors change — the buttons keep their existing fonts, shapes, and sizes. The palette is v2's (app.css tokens); scoped by .brand-nav on each nav so nothing outside the headers changes. !important (review autofix): the markup's bootstrap color utilities are themselves important. ---- */
:root {
    --quill-purple: #8E5BD8;
    --quill-pink: #F04E8A;
    --quill-orange: #F47C2C;
    --quill-yellow: #F5C04A;
    --quill-green: #2E9E5B;
}
.brand-nav .btn-orange { background-color: var(--quill-orange) !important; border-color: var(--quill-orange) !important; color: #fff !important; }
.brand-nav .btn-orange:hover, .brand-nav .btn-orange:focus { background-color: color-mix(in srgb, var(--quill-orange) 85%, black) !important; border-color: color-mix(in srgb, var(--quill-orange) 85%, black) !important; color: #fff !important; }
.brand-nav .btn-pink { background-color: var(--quill-pink) !important; border-color: var(--quill-pink) !important; color: #fff !important; }
.brand-nav .btn-pink:hover, .brand-nav .btn-pink:focus { background-color: color-mix(in srgb, var(--quill-pink) 85%, black) !important; border-color: color-mix(in srgb, var(--quill-pink) 85%, black) !important; color: #fff !important; }
.brand-nav .btn-purple { background-color: var(--quill-purple) !important; border-color: var(--quill-purple) !important; color: #fff !important; }
.brand-nav .btn-purple:hover, .brand-nav .btn-purple:focus { background-color: color-mix(in srgb, var(--quill-purple) 85%, black) !important; border-color: color-mix(in srgb, var(--quill-purple) 85%, black) !important; color: #fff !important; }
.brand-nav .btn-success { background-color: var(--quill-green) !important; border-color: var(--quill-green) !important; color: #fff !important; }
.brand-nav .btn-success:hover, .brand-nav .btn-success:focus { background-color: color-mix(in srgb, var(--quill-green) 85%, black) !important; border-color: color-mix(in srgb, var(--quill-green) 85%, black) !important; color: #fff !important; }

/* ---- V2's Inter for the navigation itself (issue #211 follow-up): the navbars and their dropdown menus, nothing else. Scoping both the inherited font and bootstrap's font variable to .brand-nav means every nav descendant — links, buttons, dropdown items, and anything referencing var(--bs-font-sans-serif) — resolves to Inter, while the rest of the page keeps the site font. Icon glyphs are unaffected (bootstrap-icons sets its own font-family). ---- */
.brand-nav {
    --bs-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-family: var(--bs-font-sans-serif);
}