/* --- Brand tokens (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;
    --warning-bg: #fffaf0;
    --warning-border: #ed8936;
}

*, *::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;
    /* Everything downstream is em-based, so this one value scales the whole
       tool. 17.5px ≈ +9% over the browser default per Zak's readability call. */
    font-size: 17.5px;
}

/* --- 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.9em; letter-spacing: -0.02em; }
.tool-subtitle { font-size: 1em; color: var(--text-secondary); margin: 0; max-width: 720px; margin-left: auto; margin-right: auto; line-height: 1.5; }
h2 { color: var(--primary); border-bottom: 2px solid var(--primary-light); padding-bottom: 12px; margin-top: 0; font-size: 1.15em; letter-spacing: -0.01em; }
h3 { color: var(--primary); margin-top: 0; font-size: 1.05em; letter-spacing: -0.01em; }

/* --- Section containers --- */
.section-container {
    background-color: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-md);
}

.intro-section p { font-size: 1em; color: var(--text-secondary); line-height: 1.65; margin: 0; }

/* --- Build notice (temporary v1.0 banner) --- */
.build-notice {
    background-color: var(--warning-bg);
    border-left: 4px solid var(--warning-border);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    margin-bottom: 24px;
    font-size: 0.95em;
    color: #744210;
    line-height: 1.5;
}

/* --- Step header --- */
.step-header { margin-bottom: 24px; }
.step-number {
    display: inline-block;
    background-color: var(--accent-gold);
    color: var(--primary);
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.8em;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.step-header h2 { border-bottom: 2px solid var(--primary-light); padding-bottom: 12px; margin-top: 8px; }
.step-subtitle { color: var(--text-secondary); font-size: 0.95em; line-height: 1.5; margin: 8px 0 0 0; }

/* --- Form rows --- */
.form-row { margin-bottom: 22px; }
.form-row label:not(.checkbox-label):not(.radio-card):not(.option-card) {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    font-size: 0.95em;
}
.form-hint {
    color: var(--text-secondary);
    font-size: 0.85em;
    margin: 6px 0 0 0;
    line-height: 1.45;
}
.form-hint a { color: var(--primary-light); text-decoration: none; }
.form-hint a:hover { text-decoration: underline; }
.optional { color: var(--text-secondary); font-weight: 400; font-size: 0.88em; }
.pref-label { color: var(--primary); margin: 0 0 6px 0; font-size: 1em; }
.pref-hint { color: var(--text-secondary); font-size: 0.9em; margin: 0 0 12px 0; line-height: 1.45; }

/* --- Input fields --- */
input[type="number"], input[type="email"], select {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 1em;
    font-family: inherit;
    background-color: var(--bg-surface);
    color: var(--text-primary);
}
input[type="number"]:focus, input[type="email"]:focus, select:focus {
    outline: none;
    border-color: var(--primary-light);
    background-color: #fff;
}

.input-with-prefix {
    display: flex;
    align-items: stretch;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--bg-surface);
    overflow: hidden;
}
.input-with-prefix:focus-within { border-color: var(--primary-light); background-color: #fff; }
.input-with-prefix .input-prefix,
.input-with-prefix .input-suffix {
    display: flex;
    align-items: center;
    padding: 0 14px;
    font-weight: 600;
    color: var(--text-secondary);
    background-color: transparent;
}
.input-with-prefix .input-suffix { color: var(--text-secondary); font-size: 0.9em; }
.input-with-prefix input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 4px;
    font-size: 1em;
    font-family: inherit;
    color: var(--text-primary);
    min-width: 0;
}
.input-with-prefix input:focus { outline: none; }

/* --- Grouped form rows (checkbox + dependent inputs) --- */
.form-row-grouped {
    background-color: var(--bg-surface);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px 18px;
}
.form-row-sub { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border-color); }

/* --- Checkbox & radio labels --- */
.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 0.95em;
    line-height: 1.5;
    color: var(--text-primary);
}
.checkbox-label input[type="checkbox"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    flex-shrink: 0;
}

.radio-group { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.radio-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    background-color: #fff;
    transition: border-color 0.15s, background-color 0.15s;
}
.radio-card input[type="radio"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    flex-shrink: 0;
}
.radio-card:has(input[type="radio"]:checked) { border-color: var(--primary); background-color: #f0f6ff; }
.radio-card strong { display: block; color: var(--text-primary); font-size: 0.95em; }
.radio-card p { margin: 4px 0 0 0; font-size: 0.85em; color: var(--text-secondary); line-height: 1.4; }

/* --- Grid layouts --- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .grid-2 { grid-template-columns: 1fr; } }

/* --- Option grids (preferences) --- */
.option-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 8px;
}
.option-grid.two-col { grid-template-columns: repeat(2, 1fr); }
.option-grid.three-col { grid-template-columns: repeat(3, 1fr); }
.option-grid.four-col { grid-template-columns: repeat(4, 1fr); }
.option-grid.checkbox-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) {
    .option-grid,
    .option-grid.three-col,
    .option-grid.four-col,
    .option-grid.checkbox-grid { grid-template-columns: 1fr 1fr; }
    .option-grid.two-col { grid-template-columns: 1fr; }
}

.option-card {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px 10px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    background-color: var(--bg-surface);
    font-weight: 500;
    font-size: 0.9em;
    color: var(--text-primary);
    transition: all 0.15s ease;
    min-height: 52px;
    line-height: 1.3;
}
.option-card:hover { border-color: var(--primary-light); background-color: #fff; }
.option-card input[type="radio"],
.option-card input[type="checkbox"] { display: none; }
.option-card.selected {
    border-color: var(--primary);
    background-color: var(--primary);
    color: var(--text-light);
    box-shadow: var(--shadow-sm);
}
.option-card span { display: block; }
.option-card small {
    display: block;
    font-size: 0.78em;
    font-weight: 400;
    margin-top: 4px;
    opacity: 0.75;
    line-height: 1.3;
}
.option-card.selected small { color: rgba(255, 255, 255, 0.85); }

/* --- Submit row --- */
.submit-row { text-align: center; margin-top: 16px; }
.action-btn {
    display: inline-block;
    padding: 14px 32px;
    background-color: var(--primary);
    color: var(--text-light);
    border: none;
    border-radius: var(--radius-md);
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    letter-spacing: 0.02em;
}
.action-btn:hover { background-color: var(--primary-light); box-shadow: var(--shadow-md); }
.action-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.action-btn-secondary { background-color: var(--accent-gold); color: var(--primary); }
.action-btn-secondary:hover { background-color: #b8983e; color: var(--text-light); }

.form-error { color: var(--accent); margin-top: 12px; font-size: 0.95em; min-height: 1.2em; }

/* --- VA comp auto-calc result --- */
.va-comp-result {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 14px;
    padding: 12px 16px;
    background-color: #fff;
    border: 2px solid var(--accent-gold);
    border-radius: var(--radius-md);
    font-size: 1em;
}
.va-comp-label { color: var(--text-secondary); font-weight: 500; }
.va-comp-amount {
    color: var(--primary);
    font-weight: 800;
    font-size: 1.2em;
    letter-spacing: -0.01em;
}

/* --- Results --- */
.results-header { margin-bottom: 24px; }
.results-title-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.results-summary { color: var(--text-secondary); margin-top: 8px; line-height: 1.5; font-size: 0.95em; }
.retake-btn {
    background-color: var(--bg-surface);
    color: var(--primary);
    border: 2px solid var(--border-color);
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9em;
}
.retake-btn:hover { background-color: #fff; border-color: var(--primary); }

/* --- Caveats --- */
.caveats-section { margin-top: 28px; }
.caveats-section h3 { margin-bottom: 10px; color: var(--primary); }
.caveats-section ul { padding-left: 20px; }
.caveats-section li { color: var(--text-secondary); font-size: 0.9em; line-height: 1.55; margin-bottom: 6px; }

/* --- Email capture --- */
.section-subtitle { color: var(--text-secondary); font-size: 0.95em; margin: 0 0 14px 0; line-height: 1.5; }
.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 { font-size: 0.9em; margin: 10px 0 0 0; min-height: 1.2em; }
.email-status.success { color: var(--green); }
.email-status.error { color: var(--accent); }
.input-hint { font-size: 0.82em; color: var(--text-secondary); margin: 8px 0 0 0; line-height: 1.4; }

/* --- Action bar --- */
.action-bar { display: flex; gap: 12px; justify-content: center; margin-bottom: 24px; flex-wrap: wrap; }
.action-bar .action-btn { flex: 0 1 auto; }

/* --- How This Works --- */
.how-it-works p { color: var(--text-secondary); line-height: 1.6; font-size: 0.95em; margin: 0 0 12px 0; }
.how-it-works p:last-child { margin-bottom: 0; }

/* --- FAQ --- */
.faq-section h2 { margin-bottom: 16px; }
.faq-item {
    background-color: var(--bg-surface);
    border-radius: var(--radius-md);
    padding: 12px 18px;
    margin-bottom: 10px;
    border: 1px solid var(--border-color);
}
.faq-item summary {
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
    padding: 6px 0;
    font-size: 1em;
    list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "▸ "; color: var(--accent-gold); font-weight: 700; }
.faq-item[open] summary::before { content: "▾ "; }
.faq-item p {
    margin: 10px 0 6px 0;
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 0.95em;
}
.faq-item a { color: var(--primary-light); text-decoration: none; }
.faq-item a:hover { text-decoration: underline; }

/* --- More tools (matches the established TBV pattern across all other tools) --- */
.more-tools {
    background-color: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    margin-bottom: 24px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.more-tools h3 {
    font-size: 1rem;
    color: #999;
    margin-top: 0;
    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 {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.85em;
    line-height: 1.55;
    padding: 16px 8px 8px;
}
.footer-sources { font-size: 0.78em; color: #718096; margin-top: 8px; }

/* --- Print styles --- */
@media print {
    body { padding: 0; max-width: 100%; background: #fff; }
    .no-print, .home-btn, .build-notice, #vfi-form, .action-bar, #email-results-container, .faq-section, .more-tools { display: none !important; }
    .section-container { box-shadow: none; border: 1px solid #ddd; page-break-inside: avoid; }
    .country-card { page-break-inside: avoid; box-shadow: none; }
}

/* Phones: stack the Home button above the brand so it doesn't overlap the
/* --- Tour --- */
#tour-restart {
    margin-top: 10px;
    background: none;
    border: 1.5px dashed var(--accent-gold);
    color: #8B6914;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
}
#tour-restart:hover { background: rgba(196, 165, 90, 0.12); }
/* Backdrop is click-through so users can interact with the spotlighted
   element and follow along. Clicking outside the spotlight exits the tour
   (handled in JS by coordinates — this layer never intercepts clicks). */
#tour-backdrop { position: fixed; inset: 0; z-index: 900; pointer-events: none; }
#tour-spotlight {
    position: absolute;
    z-index: 901;
    border-radius: var(--radius-md);
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.62);
    pointer-events: none;
    transition: all 0.25s ease;
}
#tour-tooltip {
    position: absolute;
    z-index: 902;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 20px 22px;
    max-width: 380px;
    width: calc(100vw - 48px);
    text-align: left;
}
#tour-step-label {
    margin: 0 0 4px;
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-gold);
    font-weight: 700;
}
#tour-tooltip h3 { margin: 0 0 8px; color: var(--primary); font-size: 1.1em; }
#tour-tooltip p { margin: 0; color: var(--text-secondary); line-height: 1.55; font-size: 0.95em; }
#tour-controls { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
#tour-exit {
    background: none; border: none; color: var(--text-secondary);
    font-size: 0.85em; cursor: pointer; text-decoration: underline; padding: 6px 0;
}
#tour-nav { display: flex; gap: 8px; }
#tour-back, #tour-next {
    padding: 8px 18px; border-radius: var(--radius-sm); font-weight: 600;
    cursor: pointer; font-size: 0.9em;
}
#tour-back { background: var(--bg-surface); border: 1.5px solid var(--border-color); color: var(--text-secondary); }
#tour-next { background: var(--primary); border: 1.5px solid var(--primary); color: var(--text-light); }
#tour-next:hover { background: var(--primary-light); }

@media (max-width: 560px) {
    #tour-tooltip { position: fixed; left: 12px !important; right: 12px; bottom: 12px; top: auto !important; max-width: none; width: auto; }
}

@media print {
    #tour-root, #tour-restart { display: none !important; }
}

/* --- Redesign: mode pills, form drawers, hero verdict, caveats accordion --- */
#mode-pills {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 auto 20px;
}
.mode-label { font-weight: 700; color: var(--text-secondary); font-size: 0.9em; margin-right: 4px; }
.mode-pill {
    padding: 10px 18px;
    border-radius: 999px;
    border: 1.5px solid var(--border-color);
    background: var(--bg-card);
    color: var(--primary);
    font-weight: 600;
    font-size: 0.92em;
    cursor: pointer;
    transition: all 0.15s ease;
}
.mode-pill:hover { border-color: var(--primary-light); }
.mode-pill.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

#start-here .step-number { background: var(--accent-gold); }

.form-drawer {
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    margin: 18px 0;
    padding: 14px 18px;
}
.form-drawer[open] { background: var(--bg-card); box-shadow: var(--shadow-sm); }
.form-drawer summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--primary);
    list-style: none;
    user-select: none;
}
.form-drawer summary::-webkit-details-marker { display: none; }
.form-drawer summary::before {
    content: '+';
    display: inline-block;
    width: 18px;
    color: var(--accent-gold);
    font-weight: 700;
}
.form-drawer[open] summary::before { content: '\2212'; }
.form-drawer .drawer-hint { font-weight: 400; font-size: 0.85em; color: var(--text-secondary); margin-left: 6px; }
.form-drawer .drawer-body { margin-top: 16px; }

#hero-verdict {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 26px 32px;
    margin-bottom: 24px;
    text-align: center;
}
#hero-verdict .hero-kicker {
    margin: 0 0 6px;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.75);
}
#hero-verdict .hero-line { margin: 0; font-size: 1.35em; line-height: 1.5; color: #ffffff; }
#hero-verdict .hero-line strong { color: #f6c453; }
#hero-verdict .hero-sub { margin: 8px 0 0; font-size: 0.9em; color: rgba(255,255,255,0.8); }

details.caveats-section summary {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    text-align: left;
}
details.caveats-section summary::-webkit-details-marker { display: none; }
details.caveats-section summary h3 { margin: 0; flex: 0 1 auto; min-width: 0; }
details.caveats-section .teaser { flex: 1; text-align: right; font-size: 0.88em; color: var(--text-secondary); font-style: italic; }
details.caveats-section .acc-chevron {
    flex: 0 0 auto;
    width: 10px; height: 10px;
    border-right: 2.5px solid var(--accent-gold);
    border-bottom: 2.5px solid var(--accent-gold);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    margin-top: -4px;
}
details.caveats-section[open] .acc-chevron { transform: rotate(225deg); margin-top: 4px; }

@media (max-width: 560px) {
    details.caveats-section .teaser { display: none; }
}
@media print {
    #mode-pills { display: none !important; }
    #hero-verdict { background: #fff !important; border: 1.5px solid var(--border-color); box-shadow: none; }
    #hero-verdict .hero-kicker, #hero-verdict .hero-line, #hero-verdict .hero-line strong, #hero-verdict .hero-sub { color: #1a202c !important; }
}

/* --- Result-moment capture (hero strip + pager interstitial) --- */
#hero-capture, #pager-capture {
    background: var(--bg-card);
    border: 2px solid var(--accent-gold);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 18px 22px;
    margin: -8px 0 24px;
    text-align: center;
    position: relative;
}
#pager-capture { margin: 0 0 14px; }
.hc-line { margin: 0 0 12px; font-size: 1.05em; color: var(--text-primary); }
.hc-form {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.hc-form input[type="email"] {
    flex: 1 1 260px;
    max-width: 340px;
    padding: 12px 14px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 1em;
}
.hc-hint { margin: 10px 0 0; font-size: 0.78em; color: var(--text-secondary); }
.hc-hint a { color: var(--primary-light); }
#pager-capture-close {
    position: absolute;
    top: 8px; right: 12px;
    background: none; border: none;
    font-size: 1.4em; color: var(--text-secondary);
    cursor: pointer; line-height: 1;
}

/* --- How This Works: collapsible (same pattern as caveats) --- */
details.how-it-works summary {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    text-align: left;
}
details.how-it-works summary::-webkit-details-marker { display: none; }
details.how-it-works summary h2 { margin: 0; border-bottom: none; padding-bottom: 0; flex: 0 1 auto; min-width: 0; }
details.how-it-works .teaser { flex: 1; text-align: right; font-size: 0.88em; color: var(--text-secondary); font-style: italic; }
details.how-it-works .acc-chevron {
    flex: 0 0 auto;
    width: 10px; height: 10px;
    border-right: 2.5px solid var(--accent-gold);
    border-bottom: 2.5px solid var(--accent-gold);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    margin-top: -4px;
}
details.how-it-works[open] .acc-chevron { transform: rotate(225deg); margin-top: 4px; }
details.how-it-works[open] summary h2 { border-bottom: 2px solid var(--primary-light); padding-bottom: 12px; }
details.how-it-works[open] summary { margin-bottom: 10px; }
@media (max-width: 560px) { details.how-it-works .teaser { display: none; } }

/* =====================================================================
 * Tool-specific blocks — VA Secondary Conditions Strategy Tool
 * =================================================================== */

/* --- Condition search + suggestions --- */
.cond-search-wrap { position: relative; }
#condition-search {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 1em;
}
#condition-search:focus { outline: none; border-color: var(--primary-light); box-shadow: 0 0 0 3px rgba(43,108,176,0.15); }
.cond-suggestions {
    position: absolute;
    top: calc(100% + 4px); left: 0; right: 0;
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    z-index: 40;
    max-height: 320px;
    overflow-y: auto;
}
.cond-suggestion {
    display: block;
    width: 100%;
    text-align: left;
    padding: 11px 14px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--bg-page);
    cursor: pointer;
    font-size: 0.95em;
    color: var(--text-primary);
}
.cond-suggestion:hover, .cond-suggestion.focused { background: var(--bg-surface); }
.cond-suggestion .cs-system { display: block; font-size: 0.78em; color: var(--text-secondary); margin-top: 2px; }
.cond-suggestion:last-child { border-bottom: none; }

/* --- Selected condition chips --- */
.selected-conditions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.cond-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-left: 4px solid var(--accent-gold);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
}
.cond-chip .cc-name { font-weight: 600; flex: 1 1 220px; }
.cond-chip select {
    padding: 8px 12px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 1em;
    background: #fff;
}
.cond-chip .cc-only-tier { font-size: 0.8em; color: var(--text-secondary); font-style: italic; }
.cond-chip .cc-remove {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.25em;
    line-height: 1;
    cursor: pointer;
    padding: 4px 6px;
}
.cond-chip .cc-remove:hover { color: var(--accent); }
.sc-empty { color: var(--text-secondary); font-size: 0.92em; font-style: italic; margin: 10px 0 0; }

/* --- Live running total --- */
.live-total {
    background: linear-gradient(135deg, var(--primary) 0%, #234572 100%);
    color: var(--text-light);
    border-radius: var(--radius-lg);
    padding: 22px 26px;
    margin: 28px 0 8px;
    text-align: center;
    box-shadow: var(--shadow-md);
}
.lt-row { display: flex; align-items: stretch; justify-content: center; gap: 18px; flex-wrap: wrap; }
.lt-cell { flex: 0 1 220px; }
.lt-label { font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.85; margin-bottom: 4px; }
.lt-value { font-size: 2.1em; font-weight: 800; letter-spacing: -0.02em; }
.lt-value-gold { color: var(--accent-gold); }
.lt-suffix { font-size: 0.5em; font-weight: 700; white-space: nowrap; vertical-align: 2px; }
.lt-sub { font-size: 0.95em; opacity: 0.9; margin-top: 2px; }
.lt-arrow { align-self: center; font-size: 1.6em; opacity: 0.7; }
.lt-delta { margin-top: 12px; font-size: 1.05em; font-weight: 700; color: var(--accent-gold); min-height: 1.3em; }
.lt-smc { margin-top: 6px; font-size: 0.9em; color: #e8dcc0; }
.lt-smc strong { color: var(--accent-gold); }
.lt-fine { margin: 10px auto 0; font-size: 0.76em; opacity: 0.75; max-width: 560px; line-height: 1.45; }
@media (max-width: 560px) { .lt-arrow { display: none; } .lt-cell { flex-basis: 100%; } }

/* --- Symptom grid --- */
.symptom-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin-top: 10px; }
.symptom-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    cursor: pointer;
    font-size: 0.9em;
    line-height: 1.35;
}
.symptom-check:hover { border-color: var(--primary-light); }
.symptom-check input { margin-top: 2px; accent-color: var(--primary-light); }
.symptom-check.checked { border-color: var(--accent-gold); background: #fffcf3; }

/* --- Medication questions --- */
.med-question {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-top: 10px;
    cursor: pointer;
    line-height: 1.4;
}
.med-question input { margin-top: 3px; accent-color: var(--primary-light); }
.med-question .mq-examples { display: block; font-size: 0.82em; color: var(--text-secondary); margin-top: 3px; }
.med-empty { color: var(--text-secondary); font-size: 0.9em; font-style: italic; margin: 8px 0 0; }

/* --- ITF pinned card --- */
.itf-card {
    background: linear-gradient(135deg, #2d3f2f 0%, #1f3021 100%);
    color: var(--text-light);
    border-radius: var(--radius-lg);
    border: 2px solid var(--accent-gold);
    box-shadow: var(--shadow-md);
    padding: 20px 24px;
    margin-bottom: 20px;
}
.itf-card .itf-kicker {
    display: inline-block;
    background: var(--accent-gold);
    color: #1a202c;
    font-size: 0.72em;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 3px 12px;
    margin: 0 0 10px;
}
.itf-card h3 { margin: 0 0 8px; font-size: 1.25em; color: var(--text-light); }
.itf-card p { margin: 0 0 10px; line-height: 1.55; font-size: 0.97em; }
.itf-card .itf-money { color: var(--accent-gold); font-weight: 800; }
.itf-card ul { margin: 8px 0 4px; padding-left: 20px; font-size: 0.9em; line-height: 1.55; }
.itf-card li { margin-bottom: 5px; }
.itf-card a { color: #f3ddaa; }
.itf-ways { font-size: 0.9em; opacity: 0.95; }

/* --- Myth-buster section (static, citable) --- */
.myth-section h2 { margin-bottom: 18px; }
.myth-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.myth-item {
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-top: 4px solid var(--accent-gold);
    border-radius: var(--radius-md);
    padding: 16px 18px;
}
.myth-quote { margin: 0 0 10px; font-weight: 800; color: var(--primary); font-size: 1.02em; }
.myth-item p:not(.myth-quote) { margin: 0; font-size: 0.92em; line-height: 1.55; color: var(--text-secondary); }
.myth-item strong { color: var(--text-primary); }
@media (max-width: 800px) { .myth-grid { grid-template-columns: 1fr; } }

/* --- Claim-shark cost counter --- */
.shark-card {
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    border-left: 5px solid var(--accent);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 18px 22px;
    margin-bottom: 20px;
}
.shark-kicker {
    margin: 0 0 6px;
    font-size: 0.72em;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}
.shark-card h3 { margin: 0 0 10px; font-size: 1.15em; }
.shark-card p { margin: 0 0 10px; font-size: 0.95em; line-height: 1.6; }
.shark-money { color: var(--accent); }
.shark-zero { color: var(--green); font-size: 1.15em; }

/* --- "Bring this to your doctor" block (inside claim cards) --- */
.cc-doctor {
    background: #f2f6fb;
    border: 1.5px solid #c9d9ec;
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin: 8px 0 12px;
    font-size: 0.93em;
    line-height: 1.55;
}
.cc-doctor p { margin: 0 0 10px; }
.cc-doctor ol { margin: 0 0 10px; padding-left: 20px; }
.cc-doctor li { margin-bottom: 5px; }
.cc-ask { font-style: italic; }
.cc-doctor-fine { margin-bottom: 0 !important; font-size: 0.9em; color: var(--text-secondary); }

/* --- Denied-path block --- */
.denied-h { margin: 20px 0 4px; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }
.denied-list { margin: 6px 0 10px; padding-left: 20px; font-size: 0.95em; line-height: 1.6; }
.denied-list li { margin-bottom: 10px; }

/* --- Ethics note --- */
.ethics-note {
    background: var(--warning-bg);
    border: 1.5px solid var(--warning-border);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    font-size: 0.93em;
    line-height: 1.55;
    color: var(--text-primary);
    margin-bottom: 20px;
}

/* --- TDIU callout --- */
.tdiu-callout {
    background: var(--bg-card);
    border: 1.5px solid var(--primary-light);
    border-left: 5px solid var(--primary-light);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 0.95em;
    line-height: 1.55;
}
.tdiu-callout a { color: var(--primary-light); font-weight: 600; }
.smcs-callout { border-color: var(--accent-gold); border-left-color: var(--accent-gold); background: #fffdf6; }

/* --- Claim plan cards --- */
.claim-card {
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: 14px;
    overflow: hidden;
}
.claim-card > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.claim-card > summary::-webkit-details-marker { display: none; }
.claim-card .cc-rank {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9em;
}
.claim-card .cc-title { flex: 1 1 200px; font-weight: 700; font-size: 1.04em; }
.claim-card .cc-title .cc-via { display: block; font-weight: 500; font-size: 0.8em; color: var(--text-secondary); margin-top: 2px; }
.claim-card .cc-money { flex: 0 0 auto; text-align: right; font-weight: 800; color: var(--green); }
.claim-card .cc-money .cc-money-sub { display: block; font-weight: 500; font-size: 0.75em; color: var(--text-secondary); }
.claim-card .panel-toggle { flex: 0 0 auto; }
.claim-card .cc-body { padding: 4px 18px 16px; border-top: 1px solid var(--bg-page); }
.claim-card .cc-mechanism { font-size: 0.95em; line-height: 1.55; margin: 12px 0; }
.claim-card .cc-mechanism strong { color: var(--primary); }
.claim-card h4 { margin: 14px 0 6px; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }
.claim-card ul { margin: 4px 0 10px; padding-left: 20px; font-size: 0.92em; line-height: 1.55; }
.claim-card li { margin-bottom: 4px; }
.claim-card .cc-note {
    background: var(--bg-surface);
    border-left: 3px solid var(--accent-gold);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 0.9em;
    line-height: 1.5;
    margin: 10px 0;
}
.claim-card .cc-links { font-size: 0.88em; margin-top: 10px; }
.claim-card .cc-links a { color: var(--primary-light); font-weight: 600; margin-right: 14px; }

/* Tier + flag badges */
.badge {
    display: inline-block;
    font-size: 0.68em;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 3px 10px;
    margin-right: 6px;
    vertical-align: middle;
    white-space: nowrap;
}
.badge-tier-1 { background: #e6f4ea; color: var(--green); border: 1px solid var(--green-light); }
.badge-tier-2 { background: #ebf2fa; color: var(--primary-light); border: 1px solid var(--primary-light); }
.badge-tier-3 { background: var(--bg-surface); color: var(--text-secondary); border: 1px solid var(--border-color); }
.badge-symptom { background: #fffcf3; color: #8a6d1a; border: 1px solid var(--accent-gold); }
.badge-smck { background: #f3ddaa; color: #1a202c; border: 1px solid var(--accent-gold); }
.badge-med { background: #f7e9f5; color: #7c3aed; border: 1px solid #c4b5fd; }
.badge-increase { background: #fdf0e7; color: #b34700; border: 1px solid var(--warning-border); }

/* --- Result panels (accordion w/ gold +/- toggle, career-pathway pattern) --- */
.result-panel {
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-top: 18px;
    overflow: hidden;
}
.result-panel > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 18px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    border-left: 4px solid var(--accent-gold);
}
.result-panel > summary::-webkit-details-marker { display: none; }
.result-panel > summary h3 { margin: 0; font-size: 1.05em; color: var(--primary); flex: 0 1 auto; }
.result-panel .teaser { flex: 1; text-align: right; font-size: 0.85em; color: var(--text-secondary); font-style: italic; }
.acc-toggle, .panel-toggle {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 2px solid var(--accent-gold);
    color: var(--accent-gold);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800;
    position: relative;
}
.acc-toggle::before, .panel-toggle::before { content: '+'; font-size: 1.1em; line-height: 1; }
details[open] > summary .acc-toggle::before, details[open] > summary .panel-toggle::before { content: '−'; }
details:not([open]) > summary .acc-toggle,
details:not([open]) > summary .panel-toggle {
    animation: accPulse 2.2s ease-in-out infinite;
}
details > summary:hover .acc-toggle, details > summary:hover .panel-toggle { animation-play-state: paused; }
@keyframes accPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(196,165,90,0.45); }
    50% { box-shadow: 0 0 0 7px rgba(196,165,90,0); }
}
@media (prefers-reduced-motion: reduce) {
    details:not([open]) > summary .acc-toggle, details:not([open]) > summary .panel-toggle { animation: none; }
}
.result-panel .panel-body { padding: 4px 20px 18px; border-top: 1px solid var(--bg-page); }
.panel-note { font-size: 0.92em; color: var(--text-secondary); line-height: 1.55; }
.file-steps { padding-left: 22px; line-height: 1.6; font-size: 0.97em; }
.file-steps li { margin-bottom: 12px; }

/* --- Chain explorer --- */
.explorer-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; }
.explorer-pill {
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 0.88em;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-primary);
}
.explorer-pill:hover { border-color: var(--primary-light); }
.explorer-pill.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.explorer-chain {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid var(--bg-page);
    font-size: 0.94em;
    line-height: 1.5;
}
.explorer-chain:last-child { border-bottom: none; }
.explorer-chain .ec-name { font-weight: 700; flex: 0 0 190px; }
.explorer-chain .ec-name .badge { display: block; width: fit-content; margin-top: 5px; }
@media (max-width: 600px) { .explorer-chain { flex-direction: column; gap: 6px; } .explorer-chain .ec-name { flex-basis: auto; } }

/* --- FAQ item styling (VFI pattern) --- */
.faq-section h2 { margin-top: 0; }
.faq-item {
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 10px;
    overflow: hidden;
}
.faq-item summary {
    padding: 14px 18px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; float: right; color: var(--accent-gold); font-weight: 800; }
.faq-item[open] summary::after { content: '−'; }
.faq-item p { margin: 0; padding: 0 18px 16px; line-height: 1.6; font-size: 0.95em; color: var(--text-secondary); }

/* --- Email capture surfaces: one standard treatment --------------------
   The bottom "Email My Results" card wears the same gold border as the
   result-moment #hero-capture, and BOTH share a gentle gold pulse so the
   save-your-plan surfaces read as one system. Pauses on hover/focus;
   base shadow hardcoded in the keyframes (Chrome won't animate shadows
   containing var() — career-pathway lesson). --- */
#email-results-container {
    border: 2px solid var(--accent-gold);
}
#hero-capture, #email-results-container {
    animation: capturePulse 2.6s ease-in-out infinite;
}
#hero-capture:hover, #hero-capture:focus-within,
#email-results-container:hover, #email-results-container:focus-within {
    animation-play-state: paused;
}
@keyframes capturePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(196, 165, 90, 0.40); }
    50%      { box-shadow: 0 0 0 9px rgba(196, 165, 90, 0); }
}
@media (prefers-reduced-motion: reduce) {
    #hero-capture, #email-results-container { animation: none; }
}

/* --- Tool-specific print rules --- */
@media print {
    /* The printout is the take-to-your-doctor action plan — persuasion
       surfaces (myth-buster, shark card) stay on screen; .cc-doctor prints. */
    #extras-drawer, #live-total .lt-fine, .ethics-note, #panel-explorer,
    #why-not-claimed, #shark-card { display: none !important; }
    #hero-capture, #email-results-container { animation: none; box-shadow: none; }
    #plan-more[hidden] { display: block !important; } /* print the FULL plan */
    .claim-card, .result-panel { break-inside: avoid; box-shadow: none; }
    .claim-card[open] .cc-body, .result-panel[open] .panel-body { display: block; }
    .itf-card { background: #fff !important; color: #1a202c !important; border: 2px solid #1a202c; }
    .itf-card .itf-money { color: #1a202c !important; }
    .itf-card a { color: #1a202c !important; }
    .live-total { background: #fff !important; color: #1a202c !important; border: 1.5px solid var(--border-color); box-shadow: none; }
    .live-total .lt-value-gold, .live-total .lt-delta, .live-total .lt-smc, .live-total .lt-smc strong { color: #1a202c !important; }
}