:root {
    /* deeper, more confident green — used sparingly, always flat (no gradients) */
    --primary: #0f5132;
    --primary-dark: #0b3d26;
    --primary-deeper: #08301d;
    --primary-light: #15794b;
    --primary-tint: #e9f2ed;     /* soft green surface for icon chips / highlights */
    /* amber reserved for warnings and callouts only, never decoration */
    --accent: #b7791f;
    --accent-dark: #92600f;
    --accent-soft: #fdf6e7;
    /* white page, very light cool grey for section banding */
    --bg-cream: #f5f7f6;
    --bg-white: #ffffff;
    --surface: #ffffff;
    --text-dark: #10241a;
    --text-muted: #55655c;
    --text-light: #8b968f;
    --border: #e4e9e6;
    --border-strong: #cdd6d1;
    --success: #15803d;
    --warning: #b7791f;
    --error: #b91c1c;
    --ring: rgba(15,81,50,0.14);
    --shadow-sm: 0 1px 2px rgba(16,36,26,0.04);
    --shadow-md: 0 4px 16px -4px rgba(16,36,26,0.10);
    --shadow-lg: 0 14px 34px -10px rgba(16,36,26,0.13);
    --shadow-glow: 0 2px 8px -2px rgba(16,36,26,0.10);
    --radius-sm: 10px;
    --radius: 12px;
    --radius-lg: 18px;
    --pill: 999px;
    /* kept as tokens so every old gradient usage resolves to a flat solid */
    --grad-primary: var(--primary);
    --grad-hero: var(--bg-white);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
::selection { background: rgba(15,81,50,0.16); }

body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-cream);
    color: var(--text-dark);
    line-height: 1.65;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 6px; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 790px; margin: 0 auto; padding: 0 24px; }

/* Eyebrow label */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--primary); background: var(--primary-tint); padding: 7px 16px; border-radius: var(--pill); margin-bottom: 22px; }

/* Header */
.header {
    background: rgba(255,255,255,0.82);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border);
    padding: 14px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 0 rgba(16,36,26,0.02), 0 8px 24px -20px rgba(16,36,26,0.4);
}
.header-content { max-width: 1180px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text-dark); }
.logo-icon {
    width: 42px; height: 42px;
    background: var(--grad-primary);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: white; font-weight: 700; font-size: 18px;
    font-family: 'Space Grotesk', sans-serif;
    box-shadow: var(--shadow-glow); letter-spacing: 0.5px;
}
.logo-text { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 20px; color: var(--primary); letter-spacing: -0.2px; }
.nav-links { display: flex; gap: 6px; align-items: center; }
.nav-links > a, .nav-item > a { color: var(--text-muted); text-decoration: none; font-size: 14.5px; font-weight: 600; transition: all 0.18s; padding: 8px 14px; border-radius: var(--pill); }
.nav-links > a:hover, .nav-item > a:hover, .nav-links a.active { color: var(--primary); background: rgba(15,81,50,0.07); }
/* the status check is the highest-intent action — make it read as a button */
.nav-links > .nav-cta { background: var(--primary); color: #fff; margin-left: 6px; }
.nav-links > .nav-cta:hover { background: var(--primary-dark); color: #fff; }

/* Dropdown nav */
.nav-item { position: relative; }
.nav-item > a::after { content: " ▾"; font-size: 10px; color: var(--text-light); }
.nav-dropdown {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px);
    background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); padding: 8px; min-width: 264px;
    opacity: 0; visibility: hidden; transition: opacity 0.18s, transform 0.18s; margin-top: 8px; z-index: 200;
}
.nav-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
/* Desktop-only: on mobile the dropdown is expanded inline, and this rule's
   translateX(-50%) out-specifies the mobile override and shoved the submenu
   off-screen as soon as a finger touched it. */
@media (min-width: 769px) {
    .nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
}
.nav-dropdown a { display: block; padding: 11px 14px; border-radius: 10px; font-size: 14px; font-weight: 500; white-space: nowrap; color: var(--text-muted); text-decoration: none; transition: all 0.15s; }
.nav-dropdown a:hover { background: var(--bg-cream); color: var(--primary); }

/* Hero */
.hero { background: var(--grad-hero); padding: 64px 24px 48px; text-align: center; position: relative; overflow: hidden; }
.hero > * { position: relative; z-index: 1; }
.hero h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(32px, 5.4vw, 52px);
    font-weight: 700; color: var(--text-dark);
    line-height: 1.08; width: 940px; margin: 0 auto 22px; max-width: 100%; letter-spacing: -1.2px;
}
.hero h1 span { color: var(--primary); }
.hero-description { font-size: 19px; line-height: 1.6; color: var(--text-muted); max-width: 660px; margin: 0 auto 26px; }
.trust-badges { display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; margin-top: 22px; }
/* plain inline items — the stat row below is the only "boxed" element, so the hero
   doesn't stack two competing rows of pills */
.trust-badge { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--text-muted); }
.trust-badge svg { color: var(--primary); }

/* Split hero: value proposition left, the actual tool right (stacks on mobile) */
.hero-lead { text-align: left; padding: 52px 0 60px; border-bottom: 1px solid var(--border); }
.hero-split { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }
.hero-lead h1 { width: auto; max-width: 600px; margin: 0 0 20px; }
.hero-lead .hero-description { margin: 0 0 24px; max-width: 560px; }
.hero-lead .trust-badges { justify-content: flex-start; gap: 22px; margin-top: 0; }
.hero-lead .hero-stats { justify-content: flex-start; margin-top: 32px; }
.hero-lead .stat:first-child { padding-left: 0; }
.hero-tool { width: 100%; }
@media (min-width: 980px) {
    .hero-split { grid-template-columns: 1.02fr 0.98fr; gap: 64px; align-items: start; }
    .hero-copy { padding-top: 10px; }
    /* the narrower hero column fits 3 across, leaving a lone 4th — force a tidy 2x2 */
    .hero-tool .radio-group { grid-template-columns: repeat(2, 1fr); }
}

/* "Check your status" panel — the highest-intent action, called out distinctly
   from the eligibility tool so the two aren't confused. */
.status-panel { margin-top: 30px; padding: 22px 24px; background: var(--primary-tint); border: 1px solid #cfe2d7; border-radius: var(--radius-lg); }
.status-panel h2 { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 700; color: var(--primary-dark); margin-bottom: 4px; }
.status-panel > p { font-size: 14.5px; color: var(--text-muted); margin-bottom: 16px; }
.status-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.status-actions .btn { padding: 13px 20px; font-size: 15px; }
.status-actions .btn-secondary { background: var(--bg-white); }
.status-alt { font-size: 13.5px; color: var(--text-muted); margin-top: 14px; }
.status-alt strong { color: var(--primary-dark); }
@media (max-width: 560px) { .status-actions { flex-direction: column; } .status-actions .btn { width: 100%; } }

/* Hero stat chips */
/* borderless figures separated by hairlines — no competing boxes */
.hero-stats { display: flex; justify-content: center; gap: 0; flex-wrap: wrap; margin-top: 34px; }
.stat { padding: 4px 26px; min-width: 112px; border-left: 1px solid var(--border); }
.stat:first-child { border-left: none; }
.stat b { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 27px; color: var(--primary); line-height: 1.1; letter-spacing: -0.5px; }
.stat span { font-size: 13px; color: var(--text-muted); }

/* Breadcrumbs */
.breadcrumbs { max-width: 1180px; margin: 0 auto; padding: 22px 24px; font-size: 13px; color: var(--text-light); }
/* when nested inside a container that already pads, don't double-indent or re-constrain */
.container-narrow > .breadcrumbs, .container > .breadcrumbs { max-width: none; padding: 4px 0; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; }
.breadcrumbs li { display: inline-flex; align-items: center; }
.breadcrumbs a { color: var(--text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--primary); }
.breadcrumbs li:not(:last-child)::after { content: "›"; margin: 0 10px; color: var(--border-strong); font-weight: 400; }
.breadcrumbs li[aria-current] { color: var(--primary); font-weight: 600; }

/* Section headings */
.section-title { font-family: 'Space Grotesk', sans-serif; font-size: clamp(24px, 3.5vw, 32px); font-weight: 700; color: var(--text-dark); margin-bottom: 10px; letter-spacing: -0.5px; }
.section-intro { color: var(--text-muted); max-width: 740px; margin-bottom: 30px; font-size: 16.5px; }
.section-intro a { font-weight: 600; }

/* Calculator */
/* same max-width as .container-narrow so the tool lines up exactly with the prose below it */
.calculator-section { max-width: 790px; margin: 0 auto; padding: 8px 24px 44px; }
.calculator-card { background: var(--bg-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; border: 1px solid var(--border); }
.calculator-header { background: var(--grad-primary); padding: 26px 34px; color: white; position: relative; overflow: hidden; }
.calculator-header h2 { font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 600; margin-bottom: 6px; position: relative; }
.calculator-header p { font-size: 14px; opacity: 0.92; position: relative; }
.calculator-body { padding: 34px; }

.form-group { margin-bottom: 24px; }
.form-label { display: block; font-weight: 600; margin-bottom: 10px; color: var(--text-dark); font-size: 15px; }
.form-label small { font-weight: 400; color: var(--text-light); display: block; margin-top: 4px; }
.form-input {
    width: 100%; padding: 14px 18px; border: 1.5px solid #c9c2b2; border-radius: var(--radius);
    font-size: 16px; font-family: inherit; transition: all 0.2s; background: var(--bg-white); color: var(--text-dark);
}
.form-input::placeholder { color: #9aa196; }
.form-input:focus { outline: none; border-color: var(--primary); background: var(--bg-white); box-shadow: 0 0 0 4px var(--ring); }
.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235a5a5a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 48px;
}
.radio-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.radio-option { position: relative; }
.radio-option input { position: absolute; opacity: 0; cursor: pointer; }
.radio-option label {
    display: flex; align-items: center; justify-content: center; padding: 14px 20px;
    border: 1.5px solid #c9c2b2; border-radius: var(--radius); cursor: pointer; transition: all 0.18s;
    text-align: center; height: 100%; font-weight: 600; background: var(--bg-white); color: var(--text-dark);
}
.radio-option input:checked + label { border-color: var(--primary); background: rgba(15,81,50,0.09); color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.radio-option label:hover { border-color: var(--primary-light); }
.checkbox-group { display: flex; flex-direction: column; gap: 12px; }
.checkbox-option { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.checkbox-option input { width: 22px; height: 22px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0; margin-top: 2px; }
.checkbox-option span { font-size: 15px; line-height: 1.5; }

.btn-group { display: flex; gap: 12px; margin-top: 30px; }
.btn {
    padding: 16px 26px; border: none; border-radius: var(--radius); font-size: 16px; font-weight: 600;
    font-family: inherit; cursor: pointer; transition: all 0.18s; display: inline-flex; align-items: center;
    justify-content: center; gap: 8px; text-decoration: none;
}
.btn-block { width: 100%; }
.btn-primary { background: var(--grad-primary); color: white; box-shadow: var(--shadow-glow); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(15,81,50,0.5); }
.btn-secondary { background: var(--bg-cream); color: var(--text-muted); border: 1.5px solid var(--border-strong); }
.btn-secondary:hover { border-color: var(--text-muted); color: var(--text-dark); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

/* Results */
.results-container { display: none; animation: fadeIn 0.5s ease; margin-top: 26px; }
.results-container.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.result-card { padding: 26px; border-radius: var(--radius); margin-bottom: 20px; }
.result-eligible { background: #eaf6ee; border: 1px solid #bfe0cb; }
.result-partial { background: #fdf6e7; border: 1px solid #ecd9ad; }
.result-ineligible { background: #fbecec; border: 1px solid #eec4c4; }
.result-header { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.result-icon { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0; box-shadow: var(--shadow-sm); }
.result-eligible .result-icon { background: #22c55e; color: white; }
.result-partial .result-icon { background: #f59e0b; color: white; }
.result-ineligible .result-icon { background: #ef4444; color: white; }
.result-title { font-family: 'Space Grotesk', sans-serif; font-size: 24px; font-weight: 700; }
.result-eligible .result-title { color: #15803d; }
.result-partial .result-title { color: #b45309; }
.result-ineligible .result-title { color: #dc2626; }
.result-subtitle { font-size: 14px; color: var(--text-muted); }
.result-amount { font-family: 'Space Grotesk', sans-serif; font-size: 44px; font-weight: 700; color: var(--primary); margin: 10px 0; letter-spacing: -1px; }
.result-amount small { font-size: 15px; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }

.requirements-list { margin-top: 16px; padding: 18px; background: rgba(255,255,255,0.6); border-radius: var(--radius); }
.requirements-list h4 { font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.requirements-list ul { list-style: none; font-size: 14.5px; }
.requirements-list li { padding: 7px 0; padding-left: 28px; position: relative; }
.requirements-list li::before { content: "✓"; position: absolute; left: 0; color: var(--success); font-weight: bold; }
.requirements-list li.failed::before { content: "✗"; color: var(--error); }
.requirements-list li.warn::before { content: "!"; color: var(--warning); }

/* Matched-grant rows in the "which grant" result. Its own component — reusing
   .requirements-list put a ✓ pseudo-element on top of each grant link. */
.match-list { list-style: none; margin: 16px 0 0; padding: 6px 18px; background: rgba(255,255,255,0.65); border-radius: var(--radius); }
.match-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 13px 0; border-bottom: 1px solid rgba(16,36,26,0.08); }
.match-list li:last-child { border-bottom: none; }
.match-list a { color: var(--primary); font-weight: 700; text-decoration: none; }
.match-list a:hover { text-decoration: underline; }
.match-list strong { font-family: 'Space Grotesk', sans-serif; color: var(--text-dark); white-space: nowrap; }

/* Cards / grids */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.card {
    background: var(--bg-white); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm);
    border: 1px solid var(--border); display: flex; flex-direction: column; text-decoration: none; color: inherit;
    transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
/* soft tinted chip with the brand mark in green — calmer than a solid block */
.card-icon {
    width: 48px; height: 48px; flex: 0 0 48px; background: var(--primary-tint);
    border-radius: 12px; display: flex; align-items: center; justify-content: center;
    color: var(--primary); margin-bottom: 20px; font-size: 20px;
    font-family: 'Space Grotesk', sans-serif; font-weight: 700;
}
.card-icon svg { width: 24px; height: 24px; }
.card h3 { font-family: 'Space Grotesk', sans-serif; font-size: 18.5px; font-weight: 600; margin-bottom: 8px; color: var(--text-dark); letter-spacing: -0.2px; }
.card p { font-size: 14.5px; color: var(--text-muted); line-height: 1.6; }
.card .card-cta { margin-top: auto; padding-top: 16px; color: var(--primary); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; }
.card:hover .card-cta { gap: 8px; }
.card-tag { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--primary); background: rgba(15,81,50,0.08); padding: 4px 10px; border-radius: var(--pill); margin-bottom: 12px; align-self: flex-start; }

/* Article list rows */
.article-list { display: flex; flex-direction: column; gap: 4px; }
.article-list { gap: 10px; }
.article-row {
    display: flex; gap: 16px; align-items: baseline; padding: 18px 20px; border-radius: var(--radius);
    text-decoration: none; color: inherit; transition: all 0.18s;
    background: var(--bg-white); border: 1px solid var(--border);
}
.article-row:hover { border-color: var(--primary-light); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.article-row h3 { font-size: 16.5px; font-weight: 600; color: var(--text-dark); margin-bottom: 4px; }
.article-row p { font-size: 14px; color: var(--text-muted); }
.article-row .row-cat { font-size: 12px; color: var(--primary); font-weight: 700; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.4px; }

/* Section wrapper */
.section { max-width: 1180px; margin: 0 auto; padding: 52px 24px; }
/* a narrow section must stay narrow: .section is defined later than .container-narrow,
   so without this the reading measure blows out to the full 1180px */
.section.container-narrow { max-width: 790px; }
/* extra separation where a section follows the hero, which ends on the tool card */
.section-after-hero { padding-top: 76px; }
.section-cream { background: var(--bg-cream); }
.section-white { background: var(--bg-white); }
.block-white { background: var(--bg-white); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); margin-bottom: 24px; }

/* Grants table */
.grants-table-section { background: var(--bg-white); border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow-x: auto; }
.grants-table-section h2 { font-family: 'Space Grotesk', sans-serif; font-size: 26px; font-weight: 700; margin-bottom: 22px; color: var(--text-dark); letter-spacing: -0.5px; }
.grants-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 560px; }
.grants-table th, .grants-table td { padding: 16px; text-align: left; border-bottom: 1px solid var(--border); }
.grants-table th { background: var(--primary-deeper); color: #fff; font-weight: 600; white-space: nowrap; }
.grants-table th:first-child { border-top-left-radius: 10px; }
.grants-table th:last-child { border-top-right-radius: 10px; }
.grants-table td { color: var(--text-muted); }
.grants-table tr:nth-child(even) td { background: var(--bg-cream); }
.grants-table tr:hover td { background: var(--accent-soft); }
.amount-badge { background: var(--grad-primary); color: white; padding: 6px 13px; border-radius: var(--pill); font-weight: 700; font-size: 13px; display: inline-block; white-space: nowrap; box-shadow: var(--shadow-sm); }

/* FAQ */
.faq-section h2 { font-family: 'Space Grotesk', sans-serif; font-size: 28px; font-weight: 700; margin-bottom: 22px; color: var(--text-dark); letter-spacing: -0.5px; }
.faq-item { background: var(--bg-white); border-radius: var(--radius); margin-bottom: 12px; border: 1px solid var(--border); overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; }
.faq-item.open { border-color: var(--primary-light); box-shadow: var(--shadow-sm); }
.faq-question { padding: 20px 24px; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; transition: background 0.2s; }
.faq-question:hover { background: var(--bg-cream); }
.faq-question::after { content: "+"; font-size: 24px; color: var(--primary); transition: transform 0.3s; flex-shrink: 0; }
.faq-item.open .faq-question::after { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-item.open .faq-answer { max-height: 800px; }
.faq-answer-content { padding: 0 24px 20px; font-size: 15px; color: var(--text-muted); line-height: 1.7; }
.faq-answer-content a { color: var(--primary); font-weight: 600; }

/* Info callout */
.callout { font-size: 14.5px; color: var(--text-muted); padding: 16px 18px; background: var(--accent-soft); border-radius: var(--radius); border-left: 4px solid var(--warning); margin-bottom: 22px; }
.callout a { color: var(--primary); font-weight: 600; }
.callout-info { background: #e0f2fe; border-left-color: #0284c7; }
.callout-tip { background: #dcfce7; border-left-color: var(--success); }

/* Footer */
.footer { background: var(--primary-deeper); color: white; padding: 56px 24px 32px; margin-top: 72px; }
.footer-content { max-width: 1120px; margin: 0 auto; }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 34px; margin-bottom: 32px; }
.footer-col h4 { font-family: 'Space Grotesk', sans-serif; font-size: 14px; margin-bottom: 16px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.6px; }
.footer-col a { display: block; color: rgba(255,255,255,0.72); text-decoration: none; font-size: 14px; margin-bottom: 10px; transition: color 0.18s; }
.footer-col a:hover { color: #fff; }
.footer-col p { font-size: 14px; color: rgba(255,255,255,0.72); line-height: 1.7; }
.footer-brand-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.footer-brand-logo .logo-text { color: white; }
.footer-disclaimer { font-size: 13.5px; color: rgba(255,255,255,0.8); margin: 26px 0 16px; line-height: 1.75; border-top: 1px solid rgba(255,255,255,0.18); padding-top: 24px; }
.footer-disclaimer strong { color: #fff; }
.footer-disclaimer a { color: var(--accent); }
.footer-copy { font-size: 13.5px; color: rgba(255,255,255,0.7); }
.footer-copy a { color: var(--accent); }

/* Related blocks */
.related-block { margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--border); }
.related-block h2 { font-family: 'Space Grotesk', sans-serif; font-size: 23px; margin-bottom: 20px; color: var(--text-dark); letter-spacing: -0.3px; }

/* Article prose */
.article-hero { background: var(--grad-hero); padding: 26px 24px 36px; }
.article-hero .container-narrow { padding-top: 8px; }
.article-meta { margin-top: 14px; }
.article-title { font-family: 'Space Grotesk', sans-serif; font-size: clamp(28px, 4.2vw, 42px); font-weight: 700; line-height: 1.15; margin-bottom: 14px; color: var(--text-dark); letter-spacing: -0.8px; }
.article-meta { font-size: 13px; color: var(--text-light); margin-bottom: 10px; font-weight: 500; }
.article-lead { font-size: 19px; color: var(--text-muted); line-height: 1.6; }
.prose { font-size: 17.5px; color: #2b352e; line-height: 1.8; }
/* opening standfirst paragraph reads a little larger and darker */
.prose > p:first-of-type { font-size: 19px; line-height: 1.7; color: var(--text-dark); }
/* section headings get an accent bar above them for clear rhythm */
.prose h2 { font-family: 'Space Grotesk', sans-serif; font-size: 26px; font-weight: 700; margin: 50px 0 16px; color: var(--text-dark); scroll-margin-top: 90px; letter-spacing: -0.5px; }
.prose h2::before { content: ""; display: block; width: 46px; height: 4px; border-radius: 4px; background: var(--grad-primary); margin-bottom: 18px; }
.prose h3 { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 600; margin: 34px 0 10px; color: var(--primary-dark); padding-left: 15px; border-left: 3px solid var(--accent); }
.prose p { margin-bottom: 18px; }
/* unordered lists: soft green markers */
.prose ul { list-style: none; margin: 0 0 22px; padding: 0; }
.prose ul > li { position: relative; padding-left: 30px; margin-bottom: 11px; }
.prose ul > li::before { content: ""; position: absolute; left: 6px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
/* ordered lists: numbered step circles (great for how-to guides) */
.prose ol { list-style: none; counter-reset: step; margin: 0 0 24px; padding: 0; }
.prose ol > li { position: relative; padding-left: 48px; margin-bottom: 16px; min-height: 30px; }
.prose ol > li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; background: var(--grad-primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; font-family: 'Space Grotesk', sans-serif; box-shadow: var(--shadow-glow); }
.prose li { line-height: 1.72; }
.prose a { color: var(--primary); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(15,81,50,0.35); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.prose a:hover { text-decoration-color: var(--primary); }
.prose strong { color: var(--primary-dark); font-weight: 700; }
.prose blockquote { position: relative; border-left: 4px solid var(--accent); background: var(--accent-soft); padding: 18px 22px 18px 52px; margin: 4px 0 24px; border-radius: 0 var(--radius) var(--radius) 0; color: #6b5720; font-size: 16.5px; }
.prose blockquote::before { content: "\201C"; position: absolute; left: 16px; top: 6px; font-family: 'Space Grotesk', serif; font-size: 40px; line-height: 1; color: var(--accent-dark); }
.prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 0 0 22px; display: block; overflow-x: auto; }
.prose th, .prose td { padding: 13px; text-align: left; border-bottom: 1px solid var(--border); }
.prose th { background: var(--primary-deeper); color: #fff; font-weight: 600; }
.prose tr:nth-child(even) td { background: var(--bg-cream); }
.prose hr { border: none; border-top: 1px solid var(--border); margin: 36px 0; }
.prose code { background: rgba(15,81,50,0.09); color: var(--primary-dark); padding: 2px 7px; border-radius: 6px; font-size: 0.92em; font-weight: 600; }

/* Two-column reading layout: content on a white document surface, a sticky
   sidebar holding the contents list and the tool CTA. The sidebar comes FIRST
   in the DOM so it stacks above the article on mobile, then is placed right on
   desktop — that keeps the contents list useful on a phone. */
.article-hero-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.article-layout {
    max-width: 1180px; margin: 0 auto; padding: 32px 24px 64px;
    display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start;
}
.article-main {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 40px 44px 48px;
    min-width: 0;
}
/* official-portal CTA at the top of status-intent guides */
.portal-cta { background: var(--primary); color: #fff; border-radius: var(--radius); padding: 20px; }
.portal-cta h2 { font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 5px; }
.portal-cta > p { font-size: 14px; color: rgba(255,255,255,0.85); margin-bottom: 14px; }
.portal-cta .btn-primary { background: #fff; color: var(--primary-dark); box-shadow: none; }
.portal-cta .btn-primary:hover { background: #f1f6f3; transform: none; }
.portal-cta .portal-alt { font-size: 13px; color: rgba(255,255,255,0.85); margin: 12px 0 0; line-height: 1.6; }
.portal-cta .portal-alt strong { color: #fff; }

.article-side > * + * { margin-top: 18px; }
.article-side .toc { margin-bottom: 0; }
/* the CTA is a horizontal row by default — stack it to fit the narrow sidebar.
   Keep a top margin here: this selector out-specifies `.article-side > * + *`,
   so zeroing the margin outright left the CTA flush against the contents list. */
.article-side .calc-cta { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; margin: 20px 0 0; }
.article-side > :first-child { margin-top: 0; }
.article-side .calc-cta .btn { width: 100%; }
.article-hero-inner > .breadcrumbs { max-width: none; padding: 4px 0; }

@media (min-width: 1080px) {
    .article-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; }
    .article-main { grid-column: 1; grid-row: 1; }
    .article-side { grid-column: 2; grid-row: 1; position: sticky; top: 86px; max-height: calc(100vh - 110px); overflow-y: auto; }
    /* keep a comfortable reading measure even though the column is wider */
    .article-main .prose { max-width: 68ch; }
}

/* Table of contents */
/* White card so it reads as a panel on the grey page, with numbered rows that
   have real breathing room and an active state driven by scroll position. */
.toc { background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 16px; margin-bottom: 30px; box-shadow: var(--shadow-sm); }
.toc h2 { font-family: 'Space Grotesk', sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: 0.9px; color: var(--text-light); margin: 0 0 12px; padding-left: 14px; }
.toc ol { list-style: none; counter-reset: toc; margin: 0; padding: 0; font-size: 14px; }
.toc li { margin: 0; counter-increment: toc; }
.toc a {
    display: block; padding: 9px 14px 9px 38px; position: relative;
    color: var(--text-muted); text-decoration: none; font-weight: 500; line-height: 1.45;
    border-left: 2px solid transparent; border-radius: 0 8px 8px 0; transition: all 0.15s;
}
.toc a::before {
    content: counter(toc) "."; position: absolute; left: 14px; top: 9px;
    font-size: 12.5px; font-weight: 600; color: var(--text-light);
}
.toc a:hover { color: var(--primary); background: var(--bg-cream); }
.toc a.active { color: var(--primary); font-weight: 700; background: var(--primary-tint); border-left-color: var(--primary); }
.toc a.active::before { color: var(--primary); }

/* Inline calc CTA in article */
.calc-cta { display: flex; gap: 18px; align-items: center; background: var(--primary-tint); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 26px; margin: 28px 0; }
.calc-cta .card-icon { margin-bottom: 0; flex: 0 0 auto; }
/* only the text block flexes — never the icon chip */
.calc-cta > div:not(.card-icon) { flex: 1; min-width: 0; }
.calc-cta h3 { font-family: 'Space Grotesk', sans-serif; font-size: 18px; margin-bottom: 2px; }
.calc-cta p { font-size: 14.5px; color: var(--text-muted); }

.two-col { display: grid; grid-template-columns: 1fr; gap: 40px; }

/* Mobile menu toggle (hidden on desktop) */
.nav-toggle { display: none; background: var(--bg-white); border: 1px solid var(--border-strong); border-radius: 10px; width: 42px; height: 42px; color: var(--primary); cursor: pointer; align-items: center; justify-content: center; padding: 0; }
.nav-toggle:hover { border-color: var(--primary-light); }
.nav-toggle .ico-close { display: none; }
.nav-toggle[aria-expanded="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.nav-toggle[aria-expanded="true"] .ico-open { display: none; }
.nav-toggle[aria-expanded="true"] .ico-close { display: block; }
/* icons only show inside the dropdown lists */
.nav-ico { display: none; }

@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) {
    .nav-toggle { display: inline-flex; }
    .article-main { padding: 26px 20px 32px; border-radius: var(--radius); }
    .article-layout { padding: 20px 16px 40px; }
    /* backdrop-filter makes the header a containing block for fixed-position
       descendants, which would anchor the menu sheet to the 70px header rather
       than the viewport. Drop the blur here so `position: fixed` behaves. */
    .header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg-white); }

    /* Full-height sheet below the sticky header, not a cramped dropdown */
    .nav-links {
        display: none; position: fixed; top: 71px; left: 0; right: 0; bottom: 0;
        background: var(--bg-cream); border-top: 1px solid var(--border);
        flex-direction: column; align-items: stretch; gap: 0;
        padding: 18px 18px 40px; overflow-y: auto; z-index: 300;
        -webkit-overflow-scrolling: touch;
    }
    .nav-links.open { display: flex; }
    body.nav-open { overflow: hidden; }

    /* top-level rows read as primary actions */
    .nav-links .nav-top {
        padding: 15px 16px; border-radius: var(--radius); font-size: 16px; font-weight: 700;
        color: var(--text-dark); background: var(--bg-white); border: 1px solid var(--border);
        margin-bottom: 10px;
    }
    .nav-links .nav-top.active { color: var(--primary); border-color: var(--primary-light); background: var(--primary-tint); }
    .nav-links .nav-cta { background: var(--primary); border-color: var(--primary); color: #fff; text-align: center; margin-top: 4px; }
    .nav-item > a::after { content: ""; }
    /* section label + its own card of links */
    .nav-item { margin-bottom: 6px; }
    .nav-item > .nav-top {
        margin-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; border-bottom: none;
        font-size: 12.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-light); font-weight: 700;
        padding: 14px 16px 8px; background: var(--bg-white);
    }
    .nav-dropdown {
        position: static; transform: none; opacity: 1; visibility: visible;
        box-shadow: none; background: var(--bg-white); min-width: 0; margin: 0 0 10px;
        padding: 4px 8px 8px; border: 1px solid var(--border); border-top: none;
        border-radius: 0 0 var(--radius) var(--radius);
    }
    .nav-dropdown::before { display: none; }
    .nav-dropdown a {
        display: flex; align-items: center; gap: 12px;
        padding: 12px 10px; font-size: 15px; font-weight: 600; color: var(--text-dark);
        border-radius: 10px; white-space: normal;
    }
    .nav-dropdown a:active { background: var(--primary-tint); }
    /* the shared icon set, as tinted chips */
    .nav-ico {
        display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px;
        width: 34px; height: 34px; border-radius: 9px;
        background: var(--primary-tint); color: var(--primary);
    }
    .nav-ico svg { width: 18px; height: 18px; }
    .calculator-body { padding: 26px 20px; }
    .radio-group { grid-template-columns: 1fr; }
    .btn-group { flex-direction: column; }
    .grants-table-section { padding: 22px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .calc-cta { flex-direction: column; text-align: center; }
    .article-row { flex-direction: column; gap: 4px; }
    .hero { padding: 52px 20px 40px; }
    .section { padding: 40px 20px; }
    .section-after-hero { padding-top: 58px; }
}
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }