:root {
    --cat-primary: #24536f;
    --cat-accent: #3f7d58;
    --cat-muted: #f5f7f8;
    --cat-ink: #1f2933;
}

body {
    background: #f7f8fa;
    color: var(--cat-ink);
}

.navbar {
    background: var(--cat-primary);
}

.page-shell {
    min-height: calc(100vh - 136px);
}

.card {
    border-radius: .5rem;
}

.eyebrow {
    color: var(--cat-accent);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.metric-card {
    border-top: 3px solid var(--cat-accent);
}

.question-block {
    border-left: 4px solid var(--cat-accent);
}

.required-marker {
    color: #b42318;
}

.chart-frame {
    position: relative;
    height: 420px;
    width: 100%;
}

@media (max-width: 767.98px) {
    .chart-frame {
        height: 340px;
    }
}