.housing-pension-page { --hp-ink:#172437; --hp-muted:#586b7f; --hp-line:#d2dee5; --hp-green:#0b756b; --hp-green-dark:#075f57; --hp-soft:#f3f8f7; --hp-amber:#a95d28; color:var(--hp-ink); }
.housing-pension-page * { box-sizing:border-box; }
.housing-pension-page [hidden] { display:none !important; }
.hp-heading { margin-bottom:22px; }
.hp-eyebrow { margin:0 0 7px; color:var(--hp-green-dark); font-size:.82rem; font-weight:800; }
.hp-heading h1 { margin:0 0 12px; color:var(--hp-ink); font-size:clamp(2rem,3.5vw,2.8rem); line-height:1.2; letter-spacing:0; }
.hp-heading > p:not(.hp-eyebrow) { margin:0; color:var(--hp-muted); font-size:1.05rem; line-height:1.7; }
.hp-heading nav { display:flex; flex-wrap:wrap; gap:9px 18px; margin-top:14px; }
.hp-heading nav a { color:var(--hp-green-dark); font-size:.91rem; font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.hp-reference { display:flex; flex-direction:column; gap:3px; margin:0 0 20px; padding:13px 16px; border:1px solid #bfd9d3; border-left:4px solid var(--hp-green); border-radius:6px; background:var(--hp-soft); color:var(--hp-muted); font-size:.9rem; line-height:1.5; }
.hp-reference strong { color:var(--hp-ink); }
.hp-tool { border:1px solid var(--hp-line); border-radius:7px; padding:22px; background:#fff; }
.hp-section-head { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:19px; }
.hp-section-head h2 { margin:0; font-size:1.5rem; line-height:1.25; color:var(--hp-ink); }
.hp-section-head > span { color:var(--hp-muted); font-size:.82rem; text-align:right; }
.hp-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px; }
.hp-field { display:flex; flex-direction:column; min-width:0; gap:7px; color:var(--hp-ink); font-weight:700; }
.hp-field > span, .hp-field > label > span { color:var(--hp-ink); font-size:.96rem; font-weight:750; }
.hp-field label { margin:0; }
.hp-field input, .hp-field select { width:100%; min-width:0; height:48px; padding:9px 13px; border:1px solid #bfd1d9; border-radius:6px; background:#fff; color:var(--hp-ink); font-size:1rem; font-weight:700; line-height:1.3; }
.hp-field select { padding-right:30px; }
.hp-field input:focus, .hp-field select:focus { outline:2px solid var(--hp-green); outline-offset:1px; }
.hp-field small { color:var(--hp-muted); font-size:.79rem; line-height:1.5; font-weight:400; }
.hp-wide { grid-column:1/-1; }
.hp-unit { position:relative; }
.hp-unit input { padding-right:45px; }
.hp-unit b { position:absolute; top:50%; right:14px; transform:translateY(-50%); color:var(--hp-muted); font-weight:650; pointer-events:none; }
.hp-quick { display:flex; flex-wrap:wrap; gap:7px; margin-top:4px; }
.hp-quick button { min-height:36px; padding:5px 10px; border:1px solid var(--hp-line); border-radius:5px; background:#fff; color:var(--hp-ink); font-size:.81rem; font-weight:700; cursor:pointer; }
.hp-quick button:hover { border-color:var(--hp-green); color:var(--hp-green-dark); }
.hp-advanced { margin-top:19px; padding:12px 15px; border:1px solid var(--hp-line); border-radius:6px; background:#f8fbfb; }
.hp-advanced summary { color:var(--hp-ink); font-weight:750; cursor:pointer; }
.hp-advanced .hp-fields { margin-top:15px; }
.hp-advanced p { margin:12px 0 0; color:var(--hp-muted); font-size:.82rem; line-height:1.6; }
.hp-toggle { align-items:flex-start; justify-content:center; }
.hp-toggle input { width:22px; height:22px; margin:2px 0; accent-color:var(--hp-green); }
.hp-actions { display:flex; gap:9px; margin-top:20px; }
.hp-actions button, .hp-eligibility button, .hp-copy { min-height:45px; padding:8px 15px; border:1px solid var(--hp-green); border-radius:6px; background:var(--hp-green); color:#fff; font-size:.94rem; font-weight:750; cursor:pointer; }
.hp-actions button:hover, .hp-eligibility button:hover, .hp-copy:hover { background:var(--hp-green-dark); }
.hp-actions .secondary { border-color:#bfced8; background:#fff; color:var(--hp-ink); }
.hp-actions .secondary:hover { background:#f3f7f8; }
.hp-status { min-height:1.4em; margin:10px 0 0; color:var(--hp-amber); font-size:.88rem; line-height:1.5; }
.hp-result { margin-top:14px; padding:21px; border:1px solid #a9d1ca; border-radius:7px; background:#eef8f5; }
.hp-result h3 { margin:0 0 3px; color:var(--hp-ink); font-size:1.12rem; }
.hp-result output { display:block; color:var(--hp-green-dark); font-size:clamp(2rem,4vw,2.65rem); font-weight:800; line-height:1.25; overflow-wrap:anywhere; }
.hp-result > p:not(.hp-eyebrow) { margin:6px 0 15px; color:var(--hp-muted); font-size:.88rem; line-height:1.5; }
.hp-metrics, .hp-timeline { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.hp-metrics div, .hp-timeline div { min-width:0; padding:11px 12px; border:1px solid #c8dfd8; border-radius:5px; background:#fff; }
.hp-metrics span, .hp-timeline span { display:block; color:var(--hp-muted); font-size:.78rem; }
.hp-metrics strong, .hp-timeline strong { display:block; margin-top:5px; color:var(--hp-ink); font-size:1.06rem; overflow-wrap:anywhere; }
.hp-result h4 { margin:18px 0 8px; font-size:1rem; }
.hp-note { color:var(--hp-muted); font-size:.84rem; line-height:1.6; }
.hp-copy { margin-top:7px; background:#fff; color:var(--hp-green-dark); }
.hp-copy:hover { color:#fff; }
.hp-unavailable { margin-top:12px; padding:16px; border:1px solid #e5cdb5; border-radius:6px; background:#fff8f1; color:var(--hp-ink); line-height:1.6; }
.hp-unavailable p { margin:6px 0; color:var(--hp-muted); }
.hp-unavailable a, .hp-sources a { color:var(--hp-green-dark); text-decoration:underline; text-underline-offset:3px; }
.hp-comparison, .hp-eligibility, .hp-guide, .hp-faq, .hp-sources, .hp-related { margin-top:34px; padding-top:28px; border-top:1px solid var(--hp-line); }
.hp-comparison h2, .hp-eligibility h2, .hp-guide h2, .hp-faq h2, .hp-sources h2, .hp-related h2 { margin:0 0 12px; color:var(--hp-ink); font-size:1.5rem; line-height:1.3; }
.hp-comparison h3, .hp-guide h3 { margin:22px 0 10px; color:var(--hp-ink); font-size:1.08rem; }
.hp-comparison p, .hp-eligibility p, .hp-guide p, .hp-sources p { color:var(--hp-muted); line-height:1.75; }
.hp-compare-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.hp-compare-grid h3 { margin:8px 0 10px; }
.hp-table { max-width:100%; overflow-x:auto; border:1px solid var(--hp-line); border-radius:6px; }
.hp-table table { width:100%; margin:0; border-collapse:collapse; font-size:.87rem; white-space:nowrap; }
.hp-table th, .hp-table td { padding:9px 10px; border-bottom:1px solid #e3eaee; text-align:left; }
.hp-table th { color:var(--hp-ink); font-weight:750; }
.hp-table td { color:var(--hp-ink); text-align:right; font-variant-numeric:tabular-nums; }
.hp-table thead { background:#f2f7f7; }
.hp-table tbody tr:last-child th, .hp-table tbody tr:last-child td { border-bottom:0; }
.hp-eligibility form { padding:18px; border:1px solid var(--hp-line); border-radius:6px; background:#f8fbfb; }
.hp-eligibility button { margin-top:17px; }
.hp-eligibility-result { min-height:1.3em; margin-bottom:0; }
.hp-eligibility-result strong { color:var(--hp-green-dark); }
.hp-eligibility-result ul { margin:7px 0; }
.hp-faq details { padding:14px 0; border-bottom:1px solid var(--hp-line); }
.hp-faq summary { color:var(--hp-ink); font-weight:750; cursor:pointer; }
.hp-faq details p { margin:10px 0 0; color:var(--hp-muted); line-height:1.7; }
.hp-sources ul { margin:0 0 15px; padding-left:19px; line-height:1.9; }
.hp-related > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; align-items:stretch; }
.hp-related a { display:flex; min-height:96px; flex-direction:column; justify-content:center; gap:5px; padding:13px 15px; border:1px solid var(--hp-line); border-radius:6px; background:#fff; text-decoration:none; }
.hp-related a:hover { border-color:var(--hp-green); background:#f7fbfa; }
.hp-related strong { color:var(--hp-ink); font-size:.98rem; }
.hp-related span { color:var(--hp-muted); font-size:.8rem; line-height:1.45; }
@media (max-width:700px) { .hp-tool { padding:17px; } .hp-section-head { align-items:start; flex-direction:column; } .hp-compare-grid { grid-template-columns:1fr; } }
@media (max-width:480px) { .hp-fields, .hp-metrics, .hp-timeline, .hp-related > div { grid-template-columns:1fr; } .hp-wide { grid-column:auto; } .hp-actions button { flex:1; } .hp-heading h1 { font-size:2rem; } .hp-heading nav { display:none; } .hp-tool .hp-section-head .hp-eyebrow, .hp-section-head > span { display:none; } }
@media (prefers-color-scheme:dark) { .housing-pension-page { --hp-ink:#e9f2f1; --hp-muted:#b5c7ce; --hp-line:#415660; --hp-soft:#1b3034; } .hp-tool,.hp-field input,.hp-field select,.hp-quick button,.hp-metrics div,.hp-timeline div,.hp-related a,.hp-copy { background:#172a32; color:var(--hp-ink); } .hp-advanced,.hp-eligibility form,.hp-table thead { background:#20353b; } .hp-result { background:#193a37; } .hp-unavailable { background:#3a2d25; } .hp-result output,.hp-reference strong,.hp-eyebrow,.hp-eligibility-result strong { color:#73dbcb; } }