/* Bravo → QuickBooks Online integration site
   Palette and type taken from rycoinfo.com:
     brand blue #166B9D (header, buttons, links), dark #222222, Montserrat headings, Open Sans body. */

:root {
    --brand: #166B9D;
    --brand-dark: #11537a;
    --ink: #222222;
    --muted: #777777;
    --rule: #e2e6ea;
    --page: #ffffff;
    --panel: #f5f7f9;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--page);
    color: var(--ink);
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.65;
}

h1, h2, h3 {
    font-family: Montserrat, Helvetica, Arial, sans-serif;
    color: var(--ink);
    line-height: 1.25;
}

h1 { font-size: 30px; font-weight: 600; margin: 0 0 8px; }
h2 { font-size: 22px; font-weight: 600; margin: 32px 0 10px; }
h3 { font-size: 17px; font-weight: 600; margin: 24px 0 6px; }

a { color: var(--brand); }
a:hover { color: var(--brand-dark); }

header.site {
    background: var(--brand);
    color: #fff;
    padding: 18px 0;
}

header.site .inner {
    display: flex;
    align-items: center;
    gap: 14px;
}

header.site img { height: 38px; width: auto; display: block; }

header.site .wordmark {
    font-family: Montserrat, Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
}

header.site .tag {
    margin-left: auto;
    font-size: 13px;
    color: rgba(255, 255, 255, .9);
}

.inner {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 16px;
}

main.inner { padding-top: 32px; padding-bottom: 56px; }

.lede { font-size: 17px; color: #444; margin-top: 0; }

ol, ul { padding-left: 22px; }
li { margin: 6px 0; }

.panel {
    background: var(--panel);
    border: 1px solid var(--rule);
    border-left: 4px solid var(--brand);
    border-radius: 4px;
    padding: 14px 18px;
    margin: 22px 0;
}

.panel p:first-child { margin-top: 0; }
.panel p:last-child { margin-bottom: 0; }

.path {
    font-family: Consolas, "Courier New", monospace;
    font-size: 14px;
    background: #eef2f5;
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: 1px 6px;
    white-space: nowrap;
}

table { border-collapse: collapse; width: 100%; margin: 18px 0; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-family: Montserrat, Helvetica, Arial, sans-serif; font-size: 14px; }

footer.site {
    border-top: 1px solid var(--rule);
    color: var(--muted);
    font-size: 13px;
    padding: 22px 0 40px;
}

footer.site a { margin-right: 14px; }
footer.site .legal { display: block; margin-top: 10px; }

@media (max-width: 600px) {
    h1 { font-size: 25px; }
    header.site .tag { display: none; }
}