:root {
    color-scheme: light;
    --color-primary: #0B1F3A;
    --color-secondary: #2EA8FF;
    --color-tertiary: #DDF3FF;
    --color-background: #F5F8FC;
    --color-surface: #FFFFFF;
    --color-text-primary: #0F172A;
    --color-text-secondary: #64748B;
    --color-warning: #F59E0B;
    --color-success: #22C55E;
    --color-error: #EF4444;
}

html,
body {
    min-height: 100%;
    margin: 0;
    background: var(--color-background);
}

body {
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    color: var(--color-text-primary);
}

a,
.mud-button-root {
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.app-bar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.brand-name {
    font-weight: 800;
}

.brand-link,
.footer-brand {
    display: inline-flex;
    align-items: center;
}

.brand-logo {
    width: 32px;
    height: 32px;
    margin-right: 0.65rem;
    border-radius: 8px;
    object-fit: cover;
}

.footer-logo {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    object-fit: cover;
}

.main-content {
    min-height: calc(100vh - 84px);
    background: var(--color-background);
}

.site-footer {
    border-top: 1px solid rgba(11, 31, 58, 0.08);
    background: var(--color-surface);
    color: var(--color-text-secondary);
}

.footer-content {
    min-height: 56px;
    gap: 1rem;
    flex-wrap: wrap;
}

.footer-links {
    flex-wrap: wrap;
}

.hero-section {
    padding: 5rem 0 3rem;
    background:
        linear-gradient(135deg, rgba(11, 31, 58, 0.97), rgba(46, 168, 255, 0.72)),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: auto, 52px 52px, 52px 52px;
    color: #ffffff;
}

.hero-title {
    max-width: 12ch;
    color: #ffffff;
}

.hero-grid {
    align-items: center;
}

.hero-subtitle {
    max-width: 680px;
    margin-top: 1rem;
    color: var(--color-tertiary);
    line-height: 1.45;
}

.hero-actions {
    margin-top: 2rem;
    flex-wrap: wrap;
}

.fit-card,
.info-card {
    border: 1px solid rgba(11, 31, 58, 0.08);
    border-radius: 8px;
}

.fit-card {
    background: rgba(255, 255, 255, 0.95);
}

.fit-label {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 28px;
    padding: 0.25rem 0;
    color: var(--color-primary);
    font-weight: 700;
}

.fit-label::before {
    width: 8px;
    height: 8px;
    margin-right: 0.55rem;
    border-radius: 50%;
    background: var(--color-secondary);
    content: "";
}

.content-section {
    padding: 2rem 0 4rem;
}

.problem-section {
    align-items: center;
    margin-bottom: 2rem;
}

.problem-copy {
    color: var(--color-text-secondary);
    font-size: 1.05rem;
}

.education-heading {
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    color: var(--color-primary);
}

.info-card {
    height: 100%;
    background: var(--color-surface);
}

.assessment-page {
    padding-top: 2rem;
    padding-bottom: 4rem;
}

.assessment-title {
    font-size: 2.5rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.assessment-intro {
    max-width: 720px;
    margin-top: 0.75rem;
    color: var(--color-text-secondary);
}

.assessment-card {
    border: 1px solid rgba(11, 31, 58, 0.08);
    border-radius: 8px;
    background: var(--color-surface);
}

.section-title {
    margin-bottom: 1rem;
    color: var(--color-primary);
}

.assessment-actions {
    flex-wrap: wrap;
    padding-top: 0.5rem;
}

@media (max-width: 600px) {
    .hero-section {
        padding: 3rem 0 2rem;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions .mud-button-root {
        width: 100%;
    }

    .assessment-title {
        font-size: 2rem;
    }

    .assessment-actions {
        flex-direction: column;
        align-items: stretch;
    }

.assessment-actions .mud-button-root {
        width: 100%;
    }
}

.results-page {
    padding-top: 2rem;
    padding-bottom: 4rem;
}

.results-title {
    font-size: 2.5rem;
    color: var(--color-primary);
}

.results-intro {
    max-width: 900px;
    margin-top: 0.75rem;
    color: var(--color-text-secondary);
}

.profile-card,
.recommendation-card {
    height: 100%;
    border: 1px solid rgba(11, 31, 58, 0.08);
    border-radius: 8px;
    background: var(--color-surface);
}

.chip-row {
    flex-wrap: wrap;
}

.recommendation-heading {
    color: var(--color-primary);
}

.recommendation-header {
    gap: 1rem;
}

.result-list {
    margin: 0.35rem 0 0;
    padding-left: 1.25rem;
}

.result-list li {
    margin-bottom: 0.35rem;
}

@media (max-width: 600px) {
    .results-title {
        font-size: 2rem;
    }
}

.policy-page {
    padding-top: 2rem;
    padding-bottom: 4rem;
}

.policy-title {
    font-size: 2.5rem;
    color: var(--color-primary);
}

.policy-updated {
    margin-top: 0.5rem;
    color: var(--color-text-secondary);
}

.policy-card {
    border: 1px solid rgba(11, 31, 58, 0.08);
    border-radius: 8px;
    background: var(--color-surface);
}

.policy-section-title {
    margin-bottom: 0.75rem;
    color: var(--color-primary);
}

.policy-subtitle {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    color: var(--color-primary);
}

.policy-list {
    margin: 0.5rem 0 1rem;
    padding-left: 1.25rem;
    color: var(--color-text-primary);
}

.policy-list li {
    margin-bottom: 0.35rem;
}

@media (max-width: 600px) {
    .footer-content {
        flex-direction: column;
        align-items: flex-start !important;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .policy-title {
        font-size: 2rem;
    }
}