:root {
    --color-teal: #2f6f6b;
    --color-teal-dark: #234f4c;
    --color-teal-light: #e6f0ef;
    --color-sage: #8fa998;
    --color-cream: #faf6f0;
    --color-accent-blue: #7fa8c9;
    --color-coral: #e8a487;
    --color-charcoal: #33393c;
    --color-warning: #e8a33d;
    --color-success: #4c9a6a;
}

body {
    background-color: var(--color-cream);
    color: var(--color-charcoal);
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

.text-brand { color: var(--color-teal) !important; }
.bg-brand-subtle { background-color: var(--color-teal-light) !important; }

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

.btn-outline-brand {
    border-color: var(--color-teal);
    color: var(--color-teal);
}
.btn-outline-brand:hover {
    background-color: var(--color-teal);
    color: #fff;
}

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

.navbar-brand { letter-spacing: 0.02em; }

.card {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 0.35rem 1.5rem rgba(47, 111, 107, 0.08);
}

.badge-sage {
    background-color: var(--color-sage);
    color: #fff;
}

.badge-coral {
    background-color: var(--color-coral);
    color: #4a2c20;
}

.hero {
    background: linear-gradient(135deg, var(--color-teal-light) 0%, var(--color-cream) 70%);
    border-radius: 1.5rem;
    padding: 3.5rem 2rem;
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background-color: var(--color-teal);
    color: #fff;
    font-weight: 600;
    font-size: 1.1rem;
}

.match-score-ring {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background-color: var(--color-teal-light);
    color: var(--color-teal-dark);
    font-weight: 700;
    border: 2px solid var(--color-teal);
}

.rounded-xl { border-radius: 1rem !important; }

/* Honeypot spam-trap field: kept in normal layout flow (not display:none) so
   unsophisticated bots that skip hidden fields still fill it in - genuine
   visitors never see it because it's moved off-screen and shrunk to nothing.
   Scoped to the field itself only - do NOT add a "+ *" (next sibling) clause
   here again: a previous version of this rule also matched whatever element
   happened to be rendered directly after the honeypot in the markup, which
   silently pushed an entire client-request wizard step off-screen when the
   honeypot was placed right before it. See LESSONS.md. */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; }