.finance-page { background: #faf8ff; }
.finance-page [hidden] { display: none !important; }
.finance-main { min-height: 100vh; overflow: hidden; padding: 104px 0 48px; background: #faf8ff; }
.finance-container { width: min(1280px,calc(100% - 64px)); margin-inline: auto; }
.finance-profile { height: 38px; padding: 0 4px; border: 0; border-radius: 999px; display: flex; align-items: center; gap: 3px; color: #3e4947; background: transparent; cursor: pointer; }
.finance-profile > span { width: 31px; height: 31px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #005c55; font-size: 19px; }
.finance-profile > i { font-size: 17px; font-style: normal; }

.finance-hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; }
.finance-hero-copy { min-width: 0; max-width: 800px; }
.finance-eyebrow { width: fit-content; margin: 0 0 7px !important; padding: 5px 10px; border-radius: 999px; display: flex; align-items: center; gap: 8px; color: #005c55 !important; background: #eaedff; font: 600 11px/16px "Plus Jakarta Sans",sans-serif !important; text-transform: uppercase; }
.finance-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: #005c55; animation: finance-pulse 1.8s ease-in-out infinite; }
@keyframes finance-pulse { 50% { opacity: .45; } }
.finance-hero h1 { margin: 0; overflow-wrap: anywhere; color: #131b2e; font: 600 40px/48px "Plus Jakarta Sans",sans-serif; }
.finance-hero h1 span { color: #005c55; font-weight: 400; }
.finance-hero-copy > p:last-child { max-width: 720px; margin: 5px 0 0; color: #3e4947; font-size: 15px; line-height: 24px; }
.finance-metrics { flex: 0 0 auto; padding: 14px 16px; border-radius: 12px; display: flex; align-items: center; gap: 16px; background: #f2f3ff; box-shadow: 0 2px 9px rgba(19,27,46,.05); }
.finance-metrics p { margin: 0; }
.finance-metrics span,.finance-metrics strong { display: block; }
.finance-metrics span { color: #3e4947; font-size: 12px; line-height: 16px; }
.finance-metrics strong { margin-top: 2px; font: 700 20px/26px "Plus Jakarta Sans",sans-serif; }
.finance-metrics p:first-child strong { color: #005c55; }
.finance-metrics > i { width: 1px; height: 32px; background: #dae2fd; }
.bank-ribbon { margin-top: 24px; padding: 16px; border-radius: 12px; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #fff; box-shadow: 0 2px 9px rgba(19,27,46,.05); }
.bank-ribbon > p { flex: 0 0 auto; margin: 0; display: flex; align-items: center; gap: 5px; color: #3e4947; font: 500 11px/16px "Plus Jakarta Sans",sans-serif; text-transform: uppercase; }
.bank-ribbon > p span { color: #005c55; font-size: 18px; }
.bank-ribbon > div { width: min(720px,100%); display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 16px; }
.bank-ribbon > div > span { min-height: 36px; padding: 7px 8px; border-radius: 8px; display: flex; align-items: baseline; justify-content: center; gap: 4px; background: #f2f3ff; white-space: nowrap; }
.bank-ribbon b { font: 700 13px/18px "Plus Jakarta Sans",sans-serif; }
.bank-ribbon small { color: #005c55; font-size: 10px; font-weight: 600; }

.finance-tabs { margin-top: 16px; padding: 6px; border-radius: 12px; display: flex; gap: 4px; background: #f2f3ff; box-shadow: 0 1px 6px rgba(19,27,46,.04); }
.finance-tabs button { flex: 1; min-width: 160px; min-height: 41px; padding: 8px 12px; border: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 7px; color: #3e4947; background: transparent; font: 600 13px/20px "Plus Jakarta Sans",sans-serif; cursor: pointer; }
.finance-tabs button.active { color: #005c55; background: #fff; box-shadow: 0 1px 5px rgba(19,27,46,.08); }
.finance-tabs span { font-size: 18px; }
.finance-panel { margin-top: 24px; }
.finance-grid { display: grid; grid-template-columns: minmax(0,7fr) minmax(350px,5fr); gap: 24px; align-items: stretch; }
.finance-surface { min-width: 0; border-radius: 12px; background: #fff; box-shadow: 0 3px 13px rgba(19,27,46,.065); }
.loan-controls,.eligibility-controls,.lending-capacity,.matrix-surface { padding: 24px; }
.loan-controls,.eligibility-controls { display: grid; gap: 24px; }
.finance-section-heading { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.finance-section-heading h2,.matrix-surface h2 { margin: 0; overflow-wrap: anywhere; font: 600 22px/28px "Plus Jakarta Sans",sans-serif; }
.finance-section-heading p,.matrix-surface header p { margin: 2px 0 0; color: #3e4947; font-size: 13px; line-height: 18px; }
.finance-section-heading > button { flex: 0 0 auto; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; display: grid; place-items: center; color: #3e4947; background: #f2f3ff; cursor: pointer; }
.finance-section-heading > button:hover { color: #005c55; }
.finance-section-heading > button span { font-size: 20px; }
.section-kicker { margin-bottom: 3px; display: flex; align-items: center; gap: 5px; color: #005c55; font: 600 11px/16px "Plus Jakarta Sans",sans-serif; text-transform: uppercase; }
.section-kicker i { font-size: 16px; }
.field-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.finance-field { min-width: 0; padding: 16px; border-radius: 12px; display: grid; gap: 8px; background: rgba(242,243,255,.72); }
.finance-field-heading { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.finance-field-heading label,.payment-output > label { min-width: 0; display: flex; align-items: center; gap: 5px; color: #131b2e; font: 600 12px/17px "Plus Jakarta Sans",sans-serif; }
.finance-field-heading label span { color: #005c55; font-size: 18px; }
.finance-field-heading > div { flex: 0 0 auto; min-height: 33px; padding: 5px 10px; border-radius: 8px; display: flex; align-items: center; color: #005c55; background: #fff; box-shadow: 0 1px 5px rgba(19,27,46,.06); }
.finance-field-heading > div input { width: 145px; border: 0; outline: 0; color: #131b2e; background: transparent; text-align: right; font: 600 18px/24px "Plus Jakarta Sans",sans-serif; }
.finance-field-heading > strong { flex: 0 0 auto; color: #005c55; font: 700 18px/24px "Plus Jakarta Sans",sans-serif; }
.finance-field input[type="range"] { width: 100%; height: 8px; accent-color: #005c55; cursor: pointer; }
.range-labels { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; color: #3e4947; font-size: 11px; line-height: 16px; }
.range-labels > * { overflow-wrap: anywhere; }
.range-labels b { color: #005c55; text-align: center; }
.payment-output { display: flex; flex-direction: column; justify-content: space-between; }
.payment-output > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.payment-output > div strong { overflow-wrap: anywhere; font: 700 25px/32px "Plus Jakarta Sans",sans-serif; }
.payment-output > div b { flex: 0 0 auto; color: #005c55; font-size: 11px; }
.payment-output small { color: #3e4947; font-size: 11px; line-height: 16px; }
.registry-toggle { min-width: 0; padding: 16px; border-radius: 12px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; background: rgba(226,231,255,.65); cursor: pointer; }
.registry-toggle > span:first-child { color: #005c55; font-size: 22px; }
.registry-toggle > span:nth-child(2) { min-width: 0; }
.registry-toggle strong,.registry-toggle small { display: block; overflow-wrap: anywhere; }
.registry-toggle strong { font: 600 14px/20px "Plus Jakarta Sans",sans-serif; }
.registry-toggle small { margin-top: 1px; color: #3e4947; font-size: 12px; line-height: 18px; }
.registry-toggle input,.co-applicant > label > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.registry-toggle i,.co-applicant > label > i { position: relative; width: 44px; height: 24px; border-radius: 999px; background: #dae2fd; }
.registry-toggle i::after,.co-applicant > label > i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(19,27,46,.18); transition: transform .2s ease; }
.registry-toggle input:checked + i,.co-applicant input:checked + i { background: #0f766e; }
.registry-toggle input:checked + i::after,.co-applicant input:checked + i::after { transform: translateX(20px); }

.finance-results { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.emi-summary { position: relative; overflow: hidden; padding: 24px; border-radius: 12px; color: #fff; background: #005c55; box-shadow: 0 13px 30px rgba(0,92,85,.18); }
.emi-summary header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; color: #9cf2e8; font: 500 11px/16px "Plus Jakarta Sans",sans-serif; text-transform: uppercase; }
.emi-summary header b { flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; color: #80d5cb; background: rgba(255,255,255,.15); font-size: 11px; text-transform: none; }
.emi-summary h2 { margin: 6px 0 0; font: 700 56px/64px "Plus Jakarta Sans",sans-serif; }
.emi-summary h2 i { color: #80d5cb; font-style: normal; }
.emi-summary > p { margin: 2px 0 0; color: #9cf2e8; font-size: 13px; line-height: 18px; }
.emi-summary > div { margin-top: 24px; padding: 16px; border-radius: 12px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; background: rgba(0,32,29,.24); }
.emi-summary > div p { min-width: 0; margin: 0; }
.emi-summary > div span,.emi-summary > div strong { display: block; overflow-wrap: anywhere; }
.emi-summary > div span { color: #9cf2e8; font-size: 11px; line-height: 16px; }
.emi-summary > div strong { font: 700 17px/24px "Plus Jakarta Sans",sans-serif; }
.emi-summary > button,.primary-action { width: 100%; min-height: 44px; margin-top: 16px; padding: 9px 14px; border: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 7px; color: #006f64; background: #6df5e1; box-shadow: 0 2px 8px rgba(19,27,46,.1); font: 700 13px/20px "Plus Jakarta Sans",sans-serif; cursor: pointer; }
.capital-outlay { flex: 1; padding: 24px; }
.capital-outlay h3 { margin: 0; font: 600 14px/20px "Plus Jakarta Sans",sans-serif; }
.donut-wrap { position: relative; width: 192px; height: 192px; margin: 15px auto; }
.donut-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut-wrap circle { fill: none; stroke-width: 12; stroke-linecap: butt; }
.donut-track { stroke: #e2e7ff; }
.donut-principal { stroke: #005c55; }
.donut-interest { stroke: #4fdbc8; }
.donut-registry { stroke: #606c6a; }
.donut-wrap > p { position: absolute; inset: 0; margin: 0; display: grid; place-content: center; text-align: center; }
.donut-wrap > p span,.donut-wrap > p strong { display: block; }
.donut-wrap > p span { color: #3e4947; font-size: 11px; }
.donut-wrap > p strong { font: 700 17px/24px "Plus Jakarta Sans",sans-serif; }
.capital-legend { display: grid; gap: 8px; }
.capital-legend p { min-width: 0; margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; line-height: 18px; }
.capital-legend p span { min-width: 0; display: flex; align-items: center; gap: 7px; }
.capital-legend p strong { flex: 0 0 auto; text-align: right; }
.capital-legend i { width: 12px; height: 12px; border-radius: 50%; }
.capital-legend i.principal { background: #005c55; }.capital-legend i.interest { background: #4fdbc8; }.capital-legend i.registry { background: #606c6a; }
.soft-button { width: 100%; min-height: 39px; margin-top: 18px; padding: 8px 12px; border: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; color: #131b2e; background: #f2f3ff; font: 600 11px/16px "Plus Jakarta Sans",sans-serif; cursor: pointer; }
.soft-button span:first-child { font-size: 18px; }
.amortization { margin-top: 24px; padding: 24px; }
.amortization > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 16px; }
.amortization h3 { margin: 0; font: 600 18px/24px "Plus Jakarta Sans",sans-serif; }
.amortization header p { margin: 2px 0 0; color: #3e4947; font-size: 13px; }
.amortization header button { min-height: 36px; padding: 7px 12px; border: 0; border-radius: 8px; display: flex; align-items: center; gap: 6px; color: #005c55; background: #f2f3ff; font-size: 11px; font-weight: 600; cursor: pointer; }
.amortization header span { font-size: 18px; }
.table-scroll { overflow-x: auto; }
.amortization table { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px; }
.amortization th { padding: 10px 12px; color: #3e4947; background: #eaedff; font-size: 10px; line-height: 15px; text-transform: uppercase; white-space: nowrap; }
.amortization td { padding: 9px 12px; border-bottom: 1px solid #f2f3ff; white-space: nowrap; }
.amortization td:first-child { color: #005c55; font-weight: 700; }

.persona-group > label,.eligibility-income label,.wide-input,.co-applicant label { color: #131b2e; font: 600 12px/17px "Plus Jakarta Sans",sans-serif; }
.persona-group > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 8px; }
.persona-group button { min-width: 0; padding: 16px; border: 0; border-radius: 12px; color: #131b2e; background: #f2f3ff; text-align: left; cursor: pointer; opacity: .7; }
.persona-group button.active { box-shadow: inset 0 0 0 1px #80d5cb; opacity: 1; }
.persona-group button span { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.persona-group button strong { font: 700 13px/19px "Plus Jakarta Sans",sans-serif; }
.persona-group button.active strong,.persona-group button.active i { color: #005c55; }
.persona-group button i { visibility: hidden; font-size: 20px; }
.persona-group button.active i { visibility: visible; }
.persona-group button p { margin: 4px 0 0; color: #3e4947; font-size: 12px; line-height: 18px; }
.eligibility-income { display: grid; grid-template-columns: minmax(170px,1fr) minmax(0,2fr); gap: 16px; }
.eligibility-income label,.wide-input { display: grid; gap: 5px; }
.eligibility-income select,.eligibility-income label > span,.wide-input input,.co-applicant input,.approval-modal input,.approval-modal select { width: 100%; min-width: 0; height: 44px; border: 1px solid transparent; border-radius: 8px; padding: 0 12px; color: #131b2e; background: #f2f3ff; outline: 0; }
.eligibility-income label > span { padding: 0 8px; display: flex; align-items: center; }
.eligibility-income label > span b { padding: 0 8px; color: #005c55; font-size: 18px; }
.eligibility-income label > span input { min-width: 0; border: 0; outline: 0; background: transparent; font: 600 18px/24px "Plus Jakarta Sans",sans-serif; }
.wide-input { position: relative; }
.wide-input > span { position: absolute; top: 0; right: 0; color: #3e4947; font-weight: 400; }
.wide-input input { margin-top: 2px; font: 600 18px/24px "Plus Jakarta Sans",sans-serif; }
.co-applicant { padding: 16px; border-radius: 12px; background: #f2f3ff; }
.co-applicant > label { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; cursor: pointer; }
.co-applicant > label strong,.co-applicant > label small { display: block; }
.co-applicant > label strong { font-size: 14px; }
.co-applicant > label small { margin-top: 1px; color: #3e4947; font: 400 12px/18px Inter,sans-serif; }
#co-applicant-fields { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 12px; padding-top: 4px; }
#co-applicant-fields:not([hidden]) { display: grid; }
#co-applicant-fields label { display: grid; gap: 4px; color: #3e4947; font-size: 11px; }
#co-applicant-fields input { background: #fff; }
.diaspora-note { padding: 16px; border-radius: 12px; display: flex; align-items: flex-start; gap: 10px; background: rgba(226,231,255,.65); }
.diaspora-note > span { flex: 0 0 auto; color: #005c55; font-size: 22px; }
.diaspora-note p { margin: 0; font-size: 12px; line-height: 19px; }
.diaspora-note strong { color: #005c55; }
.lending-capacity { display: flex; flex-direction: column; }
.lending-capacity > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #3e4947; font: 500 11px/16px "Plus Jakarta Sans",sans-serif; text-transform: uppercase; }
.lending-capacity > header b { padding: 3px 9px; border-radius: 999px; color: #00201d; background: #9cf2e8; font-size: 11px; }
.max-loan { margin: 18px 0 0; }
.max-loan span,.max-loan strong { display: block; }
.max-loan span { color: #3e4947; font-size: 11px; }
.max-loan strong { margin-top: 2px; color: #005c55; font: 700 45px/56px "Plus Jakarta Sans",sans-serif; overflow-wrap: anywhere; }
.capacity-stats { margin-top: 16px; padding: 16px; border-radius: 12px; display: grid; gap: 9px; background: #f2f3ff; }
.capacity-stats p { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; line-height: 18px; }
.capacity-stats span { color: #3e4947; }
.capacity-stats strong { text-align: right; }
.capacity-stats p:last-child strong { color: #005c55; }
.neighborhoods { margin-top: 18px; display: grid; gap: 8px; }
.neighborhoods h3 { margin: 0 0 2px; display: flex; align-items: center; gap: 5px; font: 700 13px/19px "Plus Jakarta Sans",sans-serif; }
.neighborhoods h3 span { color: #005c55; font-size: 18px; }
.finance-neighborhood-card { min-width: 0; padding: 12px; border-radius: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #f2f3ff; }
.finance-neighborhood-card > div { min-width: 0; }
.finance-neighborhood-card h4 { margin: 0; overflow-wrap: anywhere; font: 700 13px/19px "Plus Jakarta Sans",sans-serif; }
.finance-neighborhood-card p { margin: 2px 0 0; color: #3e4947; font-size: 12px; line-height: 18px; }
.finance-neighborhood-card > div:last-child { flex: 0 0 auto; text-align: right; }
.finance-neighborhood-card strong,.finance-neighborhood-card small { display: block; }
.finance-neighborhood-card strong { color: #005c55; font: 700 17px/23px "Plus Jakarta Sans",sans-serif; }
.finance-neighborhood-card small { color: #3e4947; font-size: 11px; }
.lending-capacity > .primary-action { margin-top: auto; color: #fff; background: #0f766e; }

.matrix-surface > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.matrix-surface > header > div { min-width: 0; }
.matrix-surface > header > p { flex: 0 0 auto; margin: 0; padding: 9px 10px; border-radius: 12px; display: flex; align-items: center; gap: 8px; background: #f2f3ff; }
.matrix-surface > header > p strong { color: #005c55; }
.fee-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-top: 24px; }
.finance-fee-card { min-width: 0; padding: 16px; border-radius: 12px; background: #f2f3ff; }
.finance-fee-card > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.finance-fee-card h3 { margin: 0; font: 700 14px/20px "Plus Jakarta Sans",sans-serif; }
.finance-fee-card strong { color: #005c55; font: 700 18px/24px "Plus Jakarta Sans",sans-serif; text-align: right; }
.finance-fee-card p { min-height: 72px; margin: 7px 0 0; color: #3e4947; font-size: 12px; line-height: 18px; }
.finance-fee-card small { display: block; padding-top: 8px; color: #3e4947; font-size: 10px; line-height: 15px; }
.case-simulation { margin-top: 24px; padding: 16px; border-radius: 12px; background: rgba(242,243,255,.72); }
.case-simulation h3 { margin: 0; font: 600 18px/24px "Plus Jakarta Sans",sans-serif; }
.case-simulation > div { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-top: 12px; }
.case-simulation p { min-width: 0; margin: 0; }
.case-simulation span,.case-simulation strong { display: block; overflow-wrap: anywhere; }
.case-simulation span { color: #3e4947; font-size: 11px; line-height: 16px; }
.case-simulation strong { margin-top: 3px; font: 700 17px/24px "Plus Jakarta Sans",sans-serif; }
.case-simulation p:last-child strong { color: #005c55; }

.repatriation { margin-top: 40px; padding: 24px; border-radius: 12px; display: grid; grid-template-columns: minmax(0,8fr) minmax(320px,4fr); align-items: center; gap: 24px; background: #eaedff; box-shadow: 0 3px 13px rgba(19,27,46,.065); }
.repatriation-badge { width: fit-content; padding: 5px 10px; border-radius: 999px; display: flex; align-items: center; gap: 6px; color: #00201d; background: #9cf2e8; font: 700 11px/16px "Plus Jakarta Sans",sans-serif; }
.repatriation-badge i { font-size: 16px; }
.repatriation h2 { margin: 16px 0 0; font: 600 32px/40px "Plus Jakarta Sans",sans-serif; }
.repatriation-copy > p { margin: 12px 0 0; color: #3e4947; font-size: 15px; line-height: 24px; }
.assurance-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-top: 20px; }
.assurance-grid article { min-width: 0; padding: 12px; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgba(19,27,46,.05); }
.assurance-grid article > span { color: #005c55; font-size: 24px; }
.assurance-grid h3 { margin: 3px 0 0; font: 700 13px/19px "Plus Jakarta Sans",sans-serif; }
.assurance-grid p { margin: 3px 0 0; color: #3e4947; font-size: 12px; line-height: 18px; }
.repatriation > aside { min-width: 0; }
.repatriation figure { position: relative; height: 256px; margin: 0; overflow: hidden; border-radius: 12px; background: #e2e7ff; box-shadow: 0 6px 18px rgba(19,27,46,.11); }
.repatriation figure::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(to top,rgba(19,27,46,.86),transparent); }
.repatriation figure img { width: 100%; height: 100%; object-fit: cover; }
.repatriation figcaption { position: absolute; z-index: 1; right: 12px; bottom: 12px; left: 12px; color: #fff; }
.repatriation figcaption small,.repatriation figcaption strong,.repatriation figcaption span { display: block; }
.repatriation figcaption small { color: #9cf2e8; font-size: 10px; line-height: 15px; text-transform: uppercase; }
.repatriation figcaption strong { font: 700 17px/24px "Plus Jakarta Sans",sans-serif; }
.repatriation figcaption span { font-size: 12px; line-height: 18px; opacity: .9; }
.repatriation > aside > button { margin-top: 16px; color: #fff; background: #005c55; }

.approval-modal { position: fixed; z-index: 100; inset: 0; padding: 16px; place-items: center; background: rgba(40,48,68,.65); backdrop-filter: blur(6px); }
.approval-modal:not([hidden]) { display: grid; }
.approval-modal > section { width: min(576px,100%); max-height: calc(100vh - 32px); padding: 24px; overflow-y: auto; border-radius: 16px; background: #fff; box-shadow: 0 20px 60px rgba(19,27,46,.25); }
.approval-modal > section > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.approval-modal header > div { display: flex; align-items: center; gap: 7px; }
.approval-modal header > div > span { color: #005c55; font-size: 26px; }
.approval-modal h2 { margin: 0; font: 600 18px/24px "Plus Jakarta Sans",sans-serif; }
.approval-modal header button { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; display: grid; place-items: center; color: #3e4947; background: transparent; cursor: pointer; }
.approval-modal > section > p { margin: 12px 0; color: #3e4947; font-size: 13px; line-height: 19px; }
#approval-form { display: grid; gap: 12px; }
.modal-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
#approval-form label,#approval-form legend { display: grid; gap: 4px; color: #131b2e; font-size: 11px; line-height: 16px; font-weight: 600; }
#approval-form fieldset { margin: 0; padding: 0; border: 0; }
#approval-form fieldset > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 5px; }
#approval-form fieldset label { min-height: 40px; padding: 7px 8px; border-radius: 8px; display: flex; align-items: center; gap: 5px; background: #f2f3ff; }
#approval-form fieldset input { width: auto; height: auto; accent-color: #005c55; }
#approval-form .primary-action { margin: 4px 0 0; color: #fff; background: #005c55; }
#approval-form > small { color: #3e4947; text-align: center; font-size: 10px; }
.approval-success { padding: 24px 0; text-align: center; }
.approval-success > span { color: #005c55; font-size: 52px; }
.approval-success h3 { margin: 5px 0 0; font: 600 18px/24px "Plus Jakarta Sans",sans-serif; }
.approval-success p { margin: 7px 0 0; color: #3e4947; font-size: 13px; line-height: 20px; }
.approval-success button { min-height: 36px; margin-top: 12px; padding: 7px 22px; border: 0; border-radius: 8px; color: #005c55; background: #f2f3ff; font-weight: 700; cursor: pointer; }
.finance-toast { position: fixed; z-index: 110; right: 24px; bottom: 24px; padding: 12px 16px; border-radius: 12px; display: flex; align-items: center; gap: 9px; color: #eef0ff; background: #283044; box-shadow: 0 9px 28px rgba(19,27,46,.24); font-size: 12px; opacity: 0; pointer-events: none; transform: translateY(15px); transition: .25s ease; }
.finance-toast.show { opacity: 1; transform: translateY(0); }
.finance-toast > span:first-child { color: #9cf2e8; font-size: 20px; }
.finance-footer { margin-top: 0; }

@media (max-width: 1100px) {
    .finance-hero-row { align-items: flex-start; flex-direction: column; }
    .finance-grid { grid-template-columns: minmax(0,1.55fr) minmax(320px,1fr); }
    .fee-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .finance-fee-card p { min-height: 54px; }
    .repatriation { grid-template-columns: minmax(0,1.5fr) minmax(300px,1fr); }
}

@media (max-width: 900px) {
    .finance-container { width: min(100% - 48px,1280px); }
    .finance-profile { display: none; }
    .finance-grid { grid-template-columns: 1fr; }
    .finance-results { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
    .repatriation { grid-template-columns: 1fr; }
    .repatriation > aside { display: grid; grid-template-columns: minmax(0,1fr) minmax(240px,.65fr); align-items: center; gap: 16px; }
    .repatriation > aside > button { margin-top: 0; }
}

@media (max-width: 700px) {
    .finance-main { padding-top: 92px; }
    .finance-container { width: min(100% - 32px,1280px); }
    .finance-hero h1 { font-size: 28px; line-height: 36px; }
    .finance-hero-copy > p:last-child { font-size: 13px; line-height: 21px; }
    .finance-metrics { width: 100%; justify-content: space-between; }
    .bank-ribbon { align-items: flex-start; flex-direction: column; }
    .bank-ribbon > div { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
    .finance-tabs { overflow-x: auto; scrollbar-width: none; }
    .finance-tabs button { flex: 0 0 180px; }
    .finance-results { grid-template-columns: 1fr; }
    .loan-controls,.eligibility-controls,.lending-capacity,.matrix-surface,.capital-outlay,.emi-summary,.amortization { padding: 16px; }
    .field-grid { grid-template-columns: 1fr; }
    .finance-field-heading { align-items: flex-start; }
    .finance-field-heading > div input { width: 115px; }
    .payment-output > div strong { font-size: 22px; line-height: 29px; }
    .emi-summary h2 { font-size: 40px; line-height: 50px; }
    .amortization > header { align-items: flex-start; flex-direction: column; }
    .persona-group > div,.eligibility-income { grid-template-columns: 1fr; }
    .wide-input > span { position: static; }
    .capacity-stats p { align-items: flex-start; flex-direction: column; gap: 2px; }
    .capacity-stats strong { text-align: left; }
    .max-loan strong { font-size: 36px; line-height: 46px; }
    .matrix-surface > header { align-items: flex-start; flex-direction: column; }
    .matrix-surface > header > p { flex-wrap: wrap; }
    .fee-grid { grid-template-columns: 1fr; }
    .finance-fee-card p { min-height: 0; }
    .case-simulation > div { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .repatriation { width: calc(100% - 24px); padding: 16px; }
    .repatriation h2 { font-size: 24px; line-height: 32px; }
    .assurance-grid { grid-template-columns: 1fr; gap: 8px; }
    .repatriation > aside { grid-template-columns: 1fr; }
    .modal-fields { grid-template-columns: 1fr; }
    #approval-form fieldset > div { grid-template-columns: 1fr; }
    .finance-toast { right: 16px; bottom: 16px; left: 16px; }
}

@media (max-width: 420px) {
    .finance-container { width: calc(100% - 24px); }
    .finance-eyebrow { align-items: flex-start; border-radius: 8px; }
    .finance-metrics { gap: 10px; padding: 12px; }
    .finance-metrics strong { font-size: 16px; line-height: 22px; }
    .bank-ribbon > div { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .finance-field-heading { flex-direction: column; }
    .finance-field-heading > div { width: 100%; }
    .finance-field-heading > div input { width: 100%; }
    .range-labels { font-size: 10px; }
    .registry-toggle { grid-template-columns: auto minmax(0,1fr); }
    .registry-toggle i { grid-column: 2; }
    .emi-summary header { align-items: flex-start; flex-direction: column; }
    .emi-summary > div { grid-template-columns: 1fr; }
    .capital-legend p { align-items: flex-start; flex-direction: column; gap: 2px; }
    .capital-legend p strong { padding-left: 19px; text-align: left; }
    #co-applicant-fields:not([hidden]) { grid-template-columns: 1fr; }
    .finance-neighborhood-card { align-items: flex-start; flex-direction: column; }
    .finance-neighborhood-card > div:last-child { text-align: left; }
    .case-simulation > div { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .finance-eyebrow i { animation: none; }
    .finance-toast { transition: none; }
}
/* Responsive calculator and legible controls in both languages. */
.finance-page .finance-main { overflow: visible; }
.finance-page .finance-grid > *, .finance-page .finance-results { min-width: 0; }
.finance-page .results-actions { gap: 12px; }
.finance-page .finance-tabs button > span:last-child { font-size: 14px; line-height: 1.6; }
.finance-page .finance-tabs button { min-width: 0; overflow-wrap: anywhere; }
.finance-page .finance-field-heading { flex-wrap: wrap; }
.finance-page .finance-field-heading label { flex: 1 1 130px; font-size: 14px; line-height: 1.6; }
.finance-page .finance-field-heading label span:not(.material-symbols-outlined) { font-size: inherit; color: inherit; }
.finance-page .finance-field-heading > div { max-width: 100%; box-sizing: border-box; }
.finance-page .finance-field-heading input { min-width: 0; max-width: 100%; }
.finance-page .payment-output > div { flex-wrap: wrap; }
.finance-page .capital-legend p { flex-wrap: wrap; }
.finance-page .capital-legend p strong { white-space: normal; overflow-wrap: anywhere; }
.finance-page .emi-summary h2 { font-size: clamp(30px, 3.5vw, 52px); line-height: 1.3; overflow-wrap: anywhere; }
.finance-page .bank-ribbon > p { flex-shrink: 1; }
.finance-page .bank-ribbon > div > span { flex-wrap: wrap; white-space: normal; }
.finance-page .amortization .table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.finance-page .finance-field input[type=range] { min-height: 24px; height: 24px; }
.finance-page .finance-field-heading strong, .finance-page .range-labels { font-variant-numeric: tabular-nums; }
.finance-page .finance-tabs { box-sizing: border-box; }
@media(max-width:1200px) { .finance-page .finance-find-property { display: none; } }
@media(max-width:1000px) { .finance-page .finance-grid { grid-template-columns: minmax(0,1fr); } .finance-page .finance-results { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) {
    .finance-page .results-outline, .finance-page .results-primary, .finance-page .results-icon { display: none; }
    .finance-page .results-actions .lang-toggle { display: inline-flex; min-width: 0; padding: 6px 10px; }
    .finance-page .finance-results { display: grid; grid-template-columns: minmax(0,1fr); }
    .finance-page .finance-tabs { display: grid; grid-template-columns: minmax(0,1fr); overflow: visible; }
    .finance-page .finance-tabs button { justify-content: flex-start; flex: none; min-height: 44px; }
    .finance-page .field-grid { grid-template-columns: minmax(0,1fr); }
    .finance-page .finance-field-heading > div { width: 100%; }
    .finance-page .finance-field-heading > div input { width: 100%; }
    .finance-page .emi-summary h2 { font-size: clamp(30px,8vw,44px); }
}
@media(max-width:760px) {
    .finance-page .finance-field-heading label { flex: 0 1 auto; }
    .finance-page .loan-controls, .finance-page .finance-field { align-content: start; }
}