:root {
    --ink: #1f2937;
    --muted: #4b5563;
    --bg-soft: #f6f7f5;
    --panel: #ffffff;
    --brand: #0b6e4f;
    --brand-dark: #064e3b;
    --warn: #b45309;
    --danger: #b91c1c;
}

body {
    font-family: 'Source Sans 3', sans-serif;
    color: var(--ink);
    background: var(--bg-soft);
}

.hero-bg {
    min-height: 100vh;
    background: radial-gradient(circle at 20% 20%, #d9efe3 0%, #eef2ef 45%, #f7f8f7 100%);
}

.hero-panel,
.form-shell,
.results-shell {
    max-width: 860px;
    background: var(--panel);
    border-radius: 18px;
    padding: 2rem;
    box-shadow: 0 20px 45px rgba(17, 24, 39, 0.08);
}

.eyebrow,
.step-label {
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--brand-dark);
    font-size: 0.8rem;
    margin-bottom: 0.4rem;
}

.display-title,
.display-title-sm {
    font-family: 'Space Grotesk', sans-serif;
    line-height: 1.1;
}

.display-title {
    font-size: clamp(2rem, 4vw, 3.4rem);
    margin-bottom: 1rem;
}

.display-title-sm {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.lead-text {
    font-size: 1.15rem;
    color: var(--muted);
    max-width: 65ch;
}

.source-note,
.muted-copy {
    color: var(--muted);
}

.step-block,
.result-card {
    background: #f9faf9;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 1rem;
}

.btn-primary {
    background: var(--brand);
    border-color: var(--brand);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
}

.field-error {
    color: var(--danger);
    margin-top: 0.3rem;
    font-size: 0.93rem;
}

.label-line {
    font-weight: 700;
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: 0.5rem;
}

.label-green {
    color: var(--brand-dark);
}

.label-amber {
    color: var(--warn);
}

.label-red {
    color: var(--danger);
}

.source-link {
    font-size: 0.82rem;
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.source-link:hover {
    color: var(--ink);
}

.example-verdict {
    font-size: 0.95rem;
}

@media (max-width: 640px) {
    .hero-panel,
    .form-shell,
    .results-shell {
        padding: 1.2rem;
        border-radius: 12px;
    }
}