/* --- Brand Colors (shared across all TBV tools) --- */
:root {
    --primary: #1a365d;
    --primary-light: #2b6cb0;
    --accent: #e53e3e;
    --accent-gold: #C4A55A;
    --text-primary: #1a202c;
    --text-secondary: #4a5568;
    --text-light: #ffffff;
    --bg-page: #edf2f7;
    --bg-surface: #f7fafc;
    --bg-card: #ffffff;
    --border-color: #cbd5e0;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.1), 0 4px 10px rgba(0,0,0,0.05);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --green: #276749;
    --green-light: #38a169;
    --gold: #b7791f;
    --gold-light: #d69e2e;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-page);
    color: var(--text-primary);
    margin: 0;
    padding: 24px;
}

/* --- Header --- */
.header-container { text-align: center; margin-bottom: 32px; }
.brand-header { margin-bottom: 8px; position: relative; }

.home-btn {
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    display: inline-block; padding: 8px 20px;
    background-color: var(--primary); color: var(--text-light);
    text-decoration: none; font-weight: 600; font-size: 0.85em;
    border-radius: var(--radius-sm); letter-spacing: 0.03em;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.home-btn:hover { background-color: var(--primary-light); box-shadow: var(--shadow-sm); }

.brand-name { font-size: 1.6em; font-weight: 800; letter-spacing: -0.02em; }
.brand-the, .brand-better { color: var(--primary); }
.brand-veteran { color: var(--accent-gold); }

h1 { text-align: center; color: var(--primary); margin-bottom: 8px; font-size: 1.8em; letter-spacing: -0.02em; }
.tool-subtitle { font-size: 1em; color: var(--text-secondary); margin: 0; max-width: 780px; margin-left: auto; margin-right: auto; }

h2 {
    color: var(--primary); border-bottom: 2px solid var(--primary-light);
    padding-bottom: 12px; margin-top: 0; font-size: 1.1em; letter-spacing: -0.01em;
    text-align: left;
}

h3 { color: var(--primary); font-size: 1.05em; margin-top: 0; margin-bottom: 8px; }

.section-subtitle { color: var(--text-secondary); margin-top: -4px; margin-bottom: 20px; font-size: 0.92em; }

/* --- Dashboard Layout --- */
.dashboard { max-width: 1100px; margin: 0 auto; }
.dash-row { margin-bottom: 20px; }

.section-container {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 24px;
    box-shadow: var(--shadow-sm);
}

/* --- Form Inputs --- */
label {
    display: block;
    font-weight: 600;
    font-size: 0.9em;
    color: var(--text-primary);
    margin-bottom: 6px;
    margin-top: 16px;
}

input[type="text"],
input[type="number"],
input[type="email"],
select {
    width: 100%;
    padding: 10px 12px;
    font-size: 0.95em;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-primary);
    transition: border-color 0.2s ease;
}

input:focus, select:focus { outline: none; border-color: var(--primary-light); }
input:disabled { background: var(--bg-surface); cursor: not-allowed; }

.input-hint { font-size: 0.82em; color: var(--text-secondary); margin-top: 4px; margin-bottom: 0; line-height: 1.5; }

.input-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 8px;
}
.input-col { display: flex; flex-direction: column; }

/* --- MOS Search Results --- */
.mos-search-results {
    margin-top: 6px;
    max-height: 320px;
    overflow-y: auto;
    border: 1.5px solid transparent;
    border-radius: var(--radius-sm);
}
.mos-search-results:not(:empty) {
    border-color: var(--border-color);
    background: var(--bg-card);
    margin-top: 8px;
    padding: 4px;
    box-shadow: var(--shadow-sm);
}
.mos-search-result {
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s ease;
}
.mos-search-result:hover { background: var(--bg-surface); }
.mos-search-result strong { color: var(--primary); }
.mos-mpc { font-size: 0.78em; color: var(--text-secondary); margin-left: 6px; }
.mos-title { font-size: 0.88em; color: var(--text-secondary); margin-top: 2px; }
.mos-search-empty { padding: 12px; color: var(--text-secondary); font-size: 0.88em; }

.mos-selected { margin-top: 12px; }
.mos-selected-card {
    background: var(--bg-surface);
    border: 1.5px solid var(--primary-light);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
}
.mos-selected-header {
    display: flex; justify-content: space-between; align-items: center;
    color: var(--primary); font-size: 0.95em;
    flex-wrap: wrap; gap: 8px;
}
.mos-mpc-badge {
    background: var(--primary-light); color: white;
    padding: 2px 8px; border-radius: 12px; font-size: 0.75em; font-weight: 600;
}
.mos-selected-meta { font-size: 0.85em; color: var(--text-secondary); margin-top: 4px; }

/* --- Career Group Chips --- */
.career-group-chips {
    display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px;
}
.career-group-chip {
    padding: 8px 14px;
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
}
.career-group-chip:hover {
    border-color: var(--primary-light);
    color: var(--primary);
}
.career-group-chip.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* --- Career Cards --- */
.career-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
}
.career-card {
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.career-card:hover {
    border-color: var(--primary-light);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}
.career-card-title { font-weight: 700; color: var(--primary); font-size: 0.95em; }
.career-card-desc { font-size: 0.85em; color: var(--text-secondary); margin-top: 4px; }
.career-card-meta {
    display: flex; gap: 12px; flex-wrap: wrap;
    font-size: 0.78em; color: var(--text-secondary);
    margin-top: 8px;
}
.career-card-meta span { background: var(--bg-card); padding: 2px 8px; border-radius: 4px; }

/* --- Pathway Hero --- */
.pathway-hero {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: center;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: white;
    padding: 20px 24px;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}
.pathway-hero-from, .pathway-hero-to { text-align: center; }
.pathway-hero-label { font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.85; }
.pathway-hero-value { font-size: 1.05em; font-weight: 700; margin-top: 4px; }
.pathway-hero-arrow { font-size: 2em; color: var(--accent-gold); font-weight: 600; }

.pathway-summary {
    font-size: 1em;
    line-height: 1.6;
    color: var(--text-primary);
    margin: 0 0 24px;
    padding: 12px 16px;
    background: var(--bg-surface);
    border-left: 3px solid var(--accent-gold);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* --- Pathway Sections --- */
.pathway-section { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border-color); }
.pathway-section:first-child { margin-top: 0; padding-top: 0; border-top: none; }

/* --- Soft Skills Grid --- */
.skill-tier-label {
    font-size: 0.85em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
    letter-spacing: -0.01em;
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 12px;
}
.skill-item {
    background: var(--bg-surface);
    border-left: 3px solid var(--primary-light);
    padding: 10px 14px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.skill-name { font-weight: 700; color: var(--primary); font-size: 0.92em; }
.skill-resume { font-size: 0.85em; color: var(--text-primary); margin-top: 4px; line-height: 1.5; }

/* --- Pathway Steps --- */
.pathway-steps { display: flex; flex-direction: column; gap: 16px; }
.pathway-step {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 16px;
    background: var(--bg-surface);
    padding: 16px;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border-color);
}
.pathway-step-number {
    width: 36px; height: 36px;
    background: var(--primary); color: white;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.05em;
}
.pathway-step-title { font-weight: 700; color: var(--primary); font-size: 1em; }
.pathway-step-meta {
    display: flex; gap: 10px; flex-wrap: wrap;
    font-size: 0.82em; margin: 6px 0 8px;
}
.pathway-step-duration {
    background: var(--bg-card); border: 1px solid var(--border-color);
    padding: 2px 10px; border-radius: 12px; color: var(--text-secondary);
    font-weight: 600;
}
.pathway-step-benefit {
    background: var(--accent-gold); color: var(--primary);
    padding: 2px 10px; border-radius: 12px; font-weight: 700;
}
.pathway-step-schooltype { font-size: 0.88em; color: var(--text-secondary); margin-bottom: 8px; }
.pathway-step-why { font-size: 0.92em; line-height: 1.55; color: var(--text-primary); }
.pathway-step-details {
    margin-top: 10px; padding-left: 18px; font-size: 0.85em;
    color: var(--text-secondary); line-height: 1.55;
}
.pathway-step-details li { margin-bottom: 3px; }

/* --- Reverse Discovery (Surprise Careers) --- */
.reverse-discovery {
    background: linear-gradient(135deg, rgba(196, 165, 90, 0.08) 0%, rgba(43, 108, 176, 0.06) 100%);
    border: 2px solid var(--accent-gold);
    border-radius: var(--radius-md);
    padding: 20px 22px;
    margin-top: 32px;
    margin-bottom: 16px;
}
.reverse-discovery-header h3 {
    margin: 0 0 6px;
    font-size: 1.15em;
    color: var(--primary);
}
.reverse-discovery-header .section-subtitle {
    margin-bottom: 18px;
    font-size: 0.9em;
    line-height: 1.55;
}

.surprise-tier { margin-bottom: 18px; }
.surprise-tier:last-child { margin-bottom: 0; }
.surprise-tier-label {
    font-size: 0.85em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
}

.surprise-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 12px;
}

.surprise-card {
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.18s ease;
    display: flex;
    flex-direction: column;
}
.surprise-card:hover {
    border-color: var(--accent-gold);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.surprise-card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.surprise-card-title {
    font-weight: 700;
    color: var(--primary);
    font-size: 1em;
}
.surprise-card-salary {
    font-weight: 700;
    color: var(--green);
    font-size: 0.85em;
    white-space: nowrap;
}
.surprise-card-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    font-size: 0.78em;
    color: var(--text-secondary);
}
.surprise-card-meta span {
    background: var(--bg-surface);
    padding: 2px 8px;
    border-radius: 4px;
}
.surprise-card-why {
    font-size: 0.88em;
    color: var(--text-primary);
    line-height: 1.55;
    flex: 1;
    margin-bottom: 12px;
}
.surprise-card-cta {
    color: var(--primary-light);
    font-weight: 700;
    font-size: 0.88em;
    text-align: right;
}

.career-explorer {
    margin-bottom: 8px;
}

/* Add space between user's career selection and the Reverse Discovery section */
.career-explorer + .reverse-discovery {
    margin-top: 24px;
}

/* --- School Recommendations --- */
.school-recommendations {
    margin-top: 16px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1.5px solid var(--accent-gold);
    border-radius: var(--radius-sm);
}
.school-recommendations-header {
    font-weight: 700;
    color: var(--primary);
    font-size: 0.92em;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}
.school-tier { margin-bottom: 12px; }
.school-tier:last-of-type { margin-bottom: 0; }
.school-tier-label {
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent-gold);
    font-weight: 700;
    margin-bottom: 8px;
}
.school-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 8px;
}
.school-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}
.school-name {
    font-weight: 700;
    color: var(--primary);
    font-size: 0.92em;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.school-loc {
    font-weight: 500;
    font-size: 0.78em;
    color: var(--text-secondary);
    background: var(--bg-card);
    padding: 1px 6px;
    border-radius: 4px;
}
.school-earnings {
    margin-top: 6px;
    font-size: 0.88em;
    color: var(--text-primary);
    line-height: 1.45;
}
.school-earnings strong { color: var(--green); font-weight: 700; }
.school-earnings-yr {
    font-size: 0.85em;
    color: var(--text-secondary);
    font-weight: 500;
}
.school-major {
    font-size: 0.82em;
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 2px;
}
.school-va-row {
    margin-top: 8px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.school-mha {
    background: var(--primary);
    color: white;
    padding: 3px 9px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: 700;
}
.school-yr-badge {
    padding: 3px 9px;
    border-radius: 4px;
    font-size: 0.78em;
    font-weight: 700;
}
.school-yr-badge.yr-yes {
    background: var(--accent-gold);
    color: var(--primary);
}

.school-meta {
    margin-top: 8px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.78em;
    color: var(--text-secondary);
}
.school-meta span {
    background: var(--bg-card);
    padding: 1px 6px;
    border-radius: 4px;
}
.school-source-note {
    margin-top: 12px;
    font-size: 0.75em;
    color: var(--text-secondary);
    font-style: italic;
    line-height: 1.5;
}

/* --- Benefit Strategy --- */
.benefit-strategy {
    background: var(--bg-surface);
    padding: 14px 16px;
    border-radius: var(--radius-sm);
}
.benefit-strategy-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 10px;
    padding: 6px 0;
    font-size: 0.92em;
    border-bottom: 1px dashed var(--border-color);
}
.benefit-strategy-row:last-child { border-bottom: none; }
.benefit-strategy-label { color: var(--text-secondary); font-weight: 600; }
.benefit-strategy-value { color: var(--text-primary); }
.benefit-strategy-value.positive { color: var(--green); font-weight: 600; }
.benefit-strategy-value.neutral { color: var(--text-secondary); }
.benefit-tip {
    background: rgba(196, 165, 90, 0.08);
    border-left: 3px solid var(--accent-gold);
    padding: 10px 14px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin-top: 12px;
    font-size: 0.9em;
    line-height: 1.55;
}
.benefit-tip a { color: var(--primary-light); font-weight: 600; }

/* --- Transition Income Section --- */
.income-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}
.income-card {
    background: var(--bg-surface);
    border-left: 3px solid var(--green);
    padding: 12px 16px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.income-card.neutral {
    border-left-color: var(--accent-gold);
}
.income-card-label {
    font-size: 0.82em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    font-weight: 700;
}
.income-card-amount {
    font-size: 1.4em;
    font-weight: 800;
    color: var(--green);
    margin: 4px 0 6px;
}
.income-card.neutral .income-card-amount { color: var(--gold); }
.income-card-sub {
    font-size: 0.85em;
    color: var(--text-primary);
    line-height: 1.5;
}
.income-card-sub a {
    color: var(--primary-light);
    font-weight: 600;
    text-decoration: none;
}
.income-card-sub a:hover { text-decoration: underline; }

.income-total {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: white;
    padding: 16px 20px;
    border-radius: var(--radius-md);
    text-align: center;
    margin-bottom: 14px;
}
.income-total-label {
    font-size: 0.82em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
    font-weight: 700;
}
.income-total-amount {
    font-size: 1.6em;
    font-weight: 800;
    margin: 6px 0;
    color: var(--accent-gold);
}
.income-total-sub {
    font-size: 0.88em;
    opacity: 0.92;
    line-height: 1.5;
}

.strategy-card {
    background: var(--bg-surface);
    border-left: 3px solid var(--accent-gold);
    padding: 12px 16px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin-top: 10px;
}
.strategy-card-header {
    font-weight: 700;
    color: var(--primary);
    font-size: 0.95em;
    margin-bottom: 6px;
}
.strategy-card-body {
    font-size: 0.9em;
    color: var(--text-primary);
    line-height: 1.55;
    margin: 0 0 6px;
}
.strategy-card-note {
    font-size: 0.82em;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
    font-style: italic;
}

/* --- Career Ladder Section --- */
.ladder-section {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    margin-top: 32px !important;
    border-top: none !important;
    box-shadow: var(--shadow-md);
}
.ladder-section-header {
    text-align: center;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,0.18);
}
.ladder-section-eyebrow {
    display: inline-block;
    background: var(--accent-gold);
    color: var(--primary);
    font-weight: 800;
    font-size: 0.75em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 14px;
    margin-bottom: 10px;
}
.ladder-section-title {
    color: white !important;
    font-size: 1.45em !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin: 0 0 8px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em;
}
.ladder-section-intro {
    color: rgba(255,255,255,0.92);
    font-size: 0.95em;
    line-height: 1.6;
    margin: 0;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.ladder-tracks {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ladder-track {
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    transition: border-color 0.2s ease;
}
.ladder-track:hover {
    border-color: var(--primary-light);
}
.ladder-track-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.ladder-track-title-block { flex: 1; min-width: 220px; }
.ladder-track-title {
    font-weight: 700;
    color: var(--primary);
    font-size: 1.05em;
    line-height: 1.3;
}
.ladder-track-meta {
    margin-top: 6px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.ladder-track-time {
    background: var(--primary-light);
    color: white;
    font-size: 0.78em;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 12px;
}
.ladder-track-edu {
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.78em;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}
.ladder-track-salary {
    text-align: right;
    background: var(--bg-card);
    border: 1.5px solid var(--green);
    border-radius: var(--radius-sm);
    padding: 8px 14px;
    min-width: 160px;
}
.ladder-track-salary-label {
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    font-weight: 700;
}
.ladder-track-salary-amount {
    color: var(--green);
    font-weight: 800;
    font-size: 1em;
    margin-top: 2px;
}
.ladder-track-description {
    color: var(--text-primary);
    font-size: 0.92em;
    line-height: 1.55;
    margin-bottom: 12px;
}
.ladder-track-section { margin-top: 10px; }
.ladder-track-section-label {
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary);
    font-weight: 700;
    margin-bottom: 4px;
}
.ladder-track-list {
    margin: 0;
    padding-left: 18px;
    font-size: 0.88em;
    color: var(--text-primary);
    line-height: 1.55;
}
.ladder-track-list li { margin-bottom: 2px; }
.ladder-track-strategy {
    margin: 0;
    font-size: 0.88em;
    color: var(--text-primary);
    line-height: 1.55;
}
.ladder-track-reality {
    margin-top: 14px;
    padding: 10px 14px;
    background: rgba(196, 165, 90, 0.08);
    border-left: 3px solid var(--accent-gold);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 0.88em;
    color: var(--text-primary);
    line-height: 1.55;
}

/* --- Recruiting Reality Check --- */
.reality-check-section {
    /* honest tone — slightly more attention-grabbing visually */
}
.reality-check-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.reality-check-header h3 {
    margin: 0;
}
.competition-tag {
    font-size: 0.72em;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    border-radius: 12px;
    color: white;
    white-space: nowrap;
}
.competition-tag.competition-extreme {
    background: linear-gradient(90deg, #c93232, #e85a1e);
}
.competition-tag.competition-very-high {
    background: linear-gradient(90deg, #d97706, #f59e0b);
}
.competition-tag.competition-high {
    background: linear-gradient(90deg, #b45309, #d97706);
}
.reality-headline {
    font-size: 1em;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.55;
    padding: 12px 14px;
    background: var(--bg-surface);
    border-left: 4px solid #e85a1e;
    border-radius: var(--radius-sm);
    margin: 0 0 18px 0;
}
.reality-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.reality-block {
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 14px 16px;
}
.reality-block-veteran {
    grid-column: 1 / -1;
    border-left: 4px solid var(--primary-light);
    background: var(--bg-card);
}
.reality-block-title {
    font-size: 0.82em;
    font-weight: 700;
    color: var(--primary-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 10px 0;
}
.reality-block-text {
    font-size: 0.88em;
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0;
}
.reality-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.reality-list-item {
    padding: 8px 10px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
}
.reality-list-name {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.9em;
    line-height: 1.35;
    margin-bottom: 3px;
}
.reality-list-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 0.8em;
    color: var(--text-secondary);
    line-height: 1.45;
}
.reality-list-who {
    font-weight: 600;
}
.reality-list-when {
    font-style: italic;
}
.reality-list-focus {
    font-size: 0.83em;
    color: var(--text-secondary);
    line-height: 1.5;
}
.reality-list-link {
    display: inline-block;
    margin-top: 4px;
    color: var(--primary-light);
    font-size: 0.78em;
    font-weight: 600;
    text-decoration: none;
}
.reality-list-link:hover {
    text-decoration: underline;
}
@media (max-width: 700px) {
    .reality-grid { grid-template-columns: 1fr; }
}

/* --- Veteran Hiring Programs & Universal Programs --- */
.programs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}
.program-card {
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.program-card:hover {
    border-color: var(--primary-light);
    box-shadow: var(--shadow-sm);
}
.program-card.universal {
    border-left: 4px solid var(--accent, #C5A55A);
}
.program-card-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 4px;
}
.program-card-name {
    font-weight: 700;
    color: var(--primary-light);
    font-size: 1em;
    line-height: 1.3;
}
.program-card-employer {
    font-size: 0.82em;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.program-card-focus {
    font-size: 0.88em;
    color: var(--text-primary);
    line-height: 1.5;
}
.program-card-focus strong {
    color: var(--text-secondary);
    font-weight: 600;
}
.program-card-notes {
    font-size: 0.86em;
    color: var(--text-secondary);
    line-height: 1.55;
}
.program-card-link {
    margin-top: auto;
    padding-top: 4px;
    color: var(--primary-light);
    font-size: 0.85em;
    font-weight: 600;
    text-decoration: none;
    align-self: flex-start;
}
.program-card-link:hover {
    text-decoration: underline;
}
.program-disclaimer {
    margin-top: 16px;
    padding: 12px 14px;
    background: var(--bg-surface);
    border-left: 3px solid var(--text-secondary);
    border-radius: var(--radius-sm);
    font-size: 0.82em;
    color: var(--text-secondary);
    line-height: 1.55;
}
.program-disclaimer strong {
    color: var(--text-primary);
}

/* --- Action Timeline --- */
.action-windows {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.action-window {
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px 18px;
}
.action-window-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}
.action-window-icon {
    font-size: 1.3em;
    line-height: 1;
}
.action-window-title {
    font-weight: 700;
    color: var(--primary-light);
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.action-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.action-item {
    padding: 10px 12px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--primary-light);
}
.action-item-action {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.95em;
    line-height: 1.4;
    margin-bottom: 4px;
}
.action-item-why {
    font-size: 0.85em;
    color: var(--text-secondary);
    line-height: 1.55;
}
.action-item-why strong {
    color: var(--text-primary);
    font-weight: 600;
}
.action-item-link {
    display: inline-block;
    margin-top: 6px;
    color: var(--primary-light);
    font-size: 0.84em;
    font-weight: 600;
    text-decoration: none;
}
.action-item-link:hover {
    text-decoration: underline;
}

/* --- Cross Links --- */
.cross-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
}
.cross-link-card {
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    text-decoration: none;
    transition: all 0.15s ease;
    display: block;
}
.cross-link-card:hover {
    border-color: var(--primary-light);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}
.cross-link-label { font-weight: 700; color: var(--primary-light); font-size: 0.95em; }
.cross-link-reason { font-size: 0.85em; color: var(--text-secondary); margin-top: 4px; line-height: 1.5; }

/* --- Buttons --- */
.action-btn {
    padding: 10px 20px; background: var(--primary);
    color: white; border: 2px solid var(--primary);
    border-radius: var(--radius-sm);
    font-weight: 600; font-size: 0.9em; cursor: pointer;
    transition: all 0.2s ease;
}
.action-btn:hover { background: var(--primary-light); box-shadow: var(--shadow-md); }
.action-btn-secondary { background: transparent; color: var(--primary); border: 2px solid var(--primary); }
.action-btn-secondary:hover { background: var(--primary); color: white; }
.action-bar { display: flex; justify-content: center; gap: 12px; margin: 20px 0; flex-wrap: wrap; }

/* --- Email Form --- */
.email-results-form { margin-top: 12px; }
.email-form-row { display: flex; gap: 10px; flex-wrap: wrap; }
.email-form-row input { flex: 1; min-width: 240px; }
.email-status { margin-top: 10px; font-size: 0.9em; font-weight: 600; min-height: 18px; }

/* --- More Tools Cross-Links --- */
.more-tools {
    max-width: 800px; margin: 2rem auto;
    padding: 1.5rem 2rem; text-align: center;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.more-tools h3 { font-size: 1rem; color: #999; margin-bottom: 0.75rem; font-weight: 500; }
.more-tools .tools-links { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; }
.more-tools .tools-links a {
    color: #C5A55A; text-decoration: none;
    font-size: 0.9rem; transition: color 0.2s;
}
.more-tools .tools-links a:hover { color: #e0c675; text-decoration: underline; }

/* --- Footer --- */
footer {
    max-width: 800px; margin: 2rem auto 1rem;
    padding: 1rem 2rem; text-align: center;
    color: var(--text-secondary); font-size: 0.82em; line-height: 1.6;
}
.footer-sources { font-size: 0.92em; opacity: 0.85; }

/* --- Print --- */
@media print {
    body { padding: 8px; background: white; }
    .home-btn, .action-bar, .more-tools, #email-results-container, .no-print { display: none !important; }
    .section-container { box-shadow: none; border: 1px solid #ccc; }
    .pathway-hero { background: var(--primary) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* --- Mobile --- */
@media (max-width: 700px) {
    body { padding: 12px; }
    h1 { font-size: 1.35em; }
    .home-btn { position: static; transform: none; display: block; text-align: center; margin-bottom: 12px; }
    .input-grid { grid-template-columns: 1fr; }
    .pathway-hero { grid-template-columns: 1fr; gap: 8px; text-align: center; }
    .pathway-hero-arrow { transform: rotate(90deg); }
    .pathway-step { grid-template-columns: 36px 1fr; gap: 12px; }
    .benefit-strategy-row { grid-template-columns: 1fr; gap: 4px; }
    .email-form-row { flex-direction: column; }
    .action-bar { flex-direction: column; align-items: center; }
}