.resource-page { color: #182b43; background: #f5f7fb; }
.resource-header { max-width: 1240px; margin: auto; padding: 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.resource-header nav, .resource-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.resource-header a, .resource-footer a { color: inherit; text-underline-offset: 4px; }
.resource-main { max-width: 1080px; margin: auto; padding: 32px 24px 64px; }
.resource-hero { max-width: 850px; padding: 30px 0; }
.resource-hero h1 { font-size: clamp(2.2rem, 4.5vw, 3.8rem); line-height: 1.1; letter-spacing: -0.035em; }
.resource-lead { font-size: 1.2rem; line-height: 1.65; margin: 24px 0; }
.byline, .example-note { color: #58677a; font-size: .9rem; }
.resource-article { background: white; border-radius: 24px; padding: clamp(24px, 5vw, 52px); line-height: 1.85; overflow: auto; }
.resource-article section { margin-bottom: 32px; }
.resource-article h2 { font-size: 1.6rem; line-height: 1.3; margin-bottom: 16px; }
.resource-article p { margin-bottom: 16px; }
.resource-article li { margin: 8px 0; }
.resource-article ul, .resource-article ol { padding-left: 24px; }
.resource-article a, .resource-card a { color: #114dc0; text-underline-offset: 4px; }
.resource-article dt { font-weight: 700; margin-top: 12px; }
.resource-screen { float: right; max-width: 240px; margin: 0 0 24px 32px; }
.resource-screen img { width: 100%; height: auto; }
.table-wrap { overflow: auto; }
.resource-page table { width: 100%; border-collapse: collapse; }
.resource-page th, .resource-page td { border-bottom: 1px solid #dfe6ef; padding: 12px; text-align: left; }
.resource-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.resource-card, .resource-cta { padding: 28px; background: white; border: 1px solid #dfe6ef; border-radius: 20px; }
.resource-card h2, .resource-cta h2 { font-size: 1.5rem; line-height: 1.3; margin-bottom: 16px; }
.resource-card p, .resource-cta p { line-height: 1.7; }
.resource-cta { clear: both; margin-top: 32px; background: #e6efff; }
.resource-cta .store-actions { margin-top: 24px; }
.resource-footer { max-width: 1080px; margin: auto; padding: 0 24px 32px; }
.resource-button, .resource-page button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #1c57d3; color: white !important; border: 0; border-radius: 10px; padding: 12px 18px; font: inherit; cursor: pointer; text-decoration: none; }
.resource-page button.secondary { background: #e6edf8; color: #182b43 !important; }
.resource-page button:disabled { opacity: .6; cursor: default; }
.resource-page button:focus-visible, .resource-page input:focus-visible, .resource-page select:focus-visible { outline: 3px solid #ffbd28; outline-offset: 3px; }
.budget-tool { background: white; padding: 28px; border-radius: 24px; }
.tool-controls, .tool-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; margin: 20px 0; }
.tool-controls label, .budget-row label { display: grid; gap: 8px; font-size: .9rem; font-weight: 600; }
.budget-tool input, .budget-tool select { min-width: 0; width: 100%; font: inherit; padding: 10px; border: 1px solid #aebed2; border-radius: 8px; background: white; color: #182b43; }
.tool-controls input { max-width: 180px; }
.budget-row { border: 1px solid #dfe6ef; border-radius: 12px; padding: 16px; margin-bottom: 14px; display: grid; grid-template-columns: 1.6fr repeat(3,1fr) auto; gap: 12px; align-items: end; }
.budget-row button { padding: 10px; }
.budget-results { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin: 24px 0; }
.budget-result { background: #f2f6fd; border-radius: 12px; padding: 20px; }
.budget-result strong { display: block; font-size: 1.45rem; margin-top: 8px; overflow-wrap: anywhere; }
.budget-chart { display: grid; gap: 12px; padding: 16px 0; }
.budget-chart label { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 16px; align-items: center; }
.budget-chart meter { width: 100%; height: 22px; }
.tool-warning { color: #843600; padding: 12px; background: #fff3df; border-radius: 8px; }
.tool-error { color: #a11525; font-weight: 600; }
.tool-explanation { margin-top: 28px; line-height: 1.8; }
.tool-explanation li { margin: 8px 0 8px 24px; }
[hidden] { display: none !important; }
@media(max-width:760px) { .resource-header { align-items: start; flex-direction: column; } .resource-header nav { gap: 12px; font-size: .9rem; } .resource-grid { grid-template-columns: 1fr; } .resource-screen { float: none; margin: 0 auto 24px; } .budget-row { grid-template-columns: repeat(2,minmax(0,1fr)); } .budget-row label:first-child { grid-column: 1 / -1; } .budget-results { grid-template-columns: repeat(2,minmax(0,1fr)); } .budget-tool { padding: 18px; } .budget-chart label { grid-template-columns: 1fr; gap: 4px; } }
@media(max-width:390px) { .budget-results { grid-template-columns: 1fr; } }
@media print { .resource-header, .resource-footer, .resource-cta, .tool-actions, .budget-row button, .privacy-banner { display: none !important; } .resource-main { max-width: none; padding: 0; } .resource-page { background: white; } .budget-tool { padding: 0; } }