/* Feinh mortgage calculator (v1.3): feinh.com/mortgage and the same calculator in Feinh Pro (.mg inside .fp-page).
   The approved mockup: a calm hero, one live calculator card with a navy result panel, three steps, the free-help form,
   and the Mortgage guide. Brand tokens only. */
.mg { --mg-navy: var(--primary); --mg-line: var(--border-default); max-inline-size: 1240px; margin: 0 auto; padding: 0 var(--space-5) var(--space-8); color: var(--text-primary); }
.mg * { box-sizing: border-box; }
.mg-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px); gap: var(--space-8); padding-block: var(--space-8); align-items: start; }
.mg-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-meta-size); font-weight: var(--weight-strong); color: var(--text-link); background: var(--success-bg); border-radius: var(--radius-full); padding: var(--space-1) var(--space-3); }
.mg-eyebrow::before { content: ""; inline-size: var(--space-2); block-size: var(--space-2); border-radius: var(--radius-full); background: var(--accent-strong); }
.mg h1 { font-family: var(--font-display); font-size: var(--text-mkt-h1-size); line-height: 1.05; letter-spacing: -0.03em; margin: var(--space-5) 0 var(--space-4); font-weight: var(--weight-bold); }
html[dir=rtl] .mg h1 { font-family: var(--font-arabic); letter-spacing: 0; line-height: 1.3; }
.mg h1 em { font-style: normal; color: var(--accent-strong); }
.mg-lead { font-size: var(--text-lead-size); line-height: 1.55; color: var(--text-secondary); margin: 0; max-inline-size: 34rem; }
.mg-agent { margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--surface-selected); font-weight: var(--weight-strong); }
.mg-ticks { list-style: none; padding: 0; margin: var(--space-6) 0 0; display: grid; gap: var(--space-3); }
.mg-ticks li { display: flex; gap: var(--space-3); align-items: flex-start; }
.mg-ticks li::before { content: "✓"; flex: none; inline-size: var(--space-5); block-size: var(--space-5); border-radius: var(--radius-full); background: var(--success-bg); color: var(--text-link); display: grid; place-items: center; font-size: var(--text-meta-size); font-weight: var(--weight-bold); }
.mg-rates { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-6); }
.mg-rate { border: var(--border-w) solid var(--mg-line); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); background: var(--surface-raised); min-inline-size: 9.5rem; }
.mg-rate small { display: block; color: var(--text-secondary); font-size: var(--text-meta-size); }
.mg-rate strong { font-family: var(--font-num); font-size: var(--text-xl-size); }

.mg-calc { background: var(--surface-raised); border: var(--border-w) solid var(--mg-line); border-radius: var(--radius-xl); box-shadow: var(--elevation-float); overflow: hidden; }
.mg-tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface-sunken); padding: var(--space-1); margin: var(--space-5) var(--space-5) 0; border-radius: var(--radius-lg); }
.mg-tabs button { appearance: none; border: 0; background: none; font: inherit; font-weight: var(--weight-strong); color: var(--text-secondary); padding: var(--space-3); border-radius: var(--radius-sm); cursor: pointer; }
.mg-tabs [aria-selected=true] { background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--elevation-1); }
.mg-in { padding: var(--space-5) var(--space-6) 0; display: grid; gap: var(--space-5); }
.mg-in[hidden] { display: none; }
.mg-f { display: grid; gap: var(--space-2); min-inline-size: 0; }
.mg-progf { padding: var(--space-5) var(--space-6) 0; }
.mg-f > label, .mg-l { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--text-meta-size); color: var(--text-secondary); }
.mg-l b { color: var(--text-primary); font-family: var(--font-num); }
.mg-big { display: flex; align-items: center; gap: var(--space-2); border: var(--border-w-strong) solid var(--mg-line); border-radius: var(--radius-lg); padding: 0 var(--space-4); block-size: 3.6rem; background: var(--surface-raised); }
.mg-big:focus-within { border-color: var(--mg-navy); box-shadow: 0 0 0 var(--space-1) var(--surface-selected); }
.mg-big i { font-style: normal; color: var(--text-secondary); font-size: var(--text-meta-size); }
.mg-big input { flex: 1; min-inline-size: 0; border: 0; outline: 0; background: none; font: var(--weight-strong) var(--text-display-size)/1 var(--font-num); color: var(--text-primary); padding: 0; }
.mg-big.mg-sm { block-size: 3rem; }
.mg-big.mg-sm input { font-size: var(--text-lg-size); }
.mg input[type=range] { inline-size: 100%; accent-color: var(--accent-strong); margin: var(--space-2) 0 0; block-size: var(--space-5); }
.mg-marks { display: flex; justify-content: space-between; font-size: var(--text-meta-size); color: var(--text-secondary); }
.mg-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mg-chips button, .mg-radio span { appearance: none; font: inherit; font-weight: var(--weight-strong); font-size: var(--text-meta-size); padding: var(--space-2) var(--space-4); border: var(--border-w) solid var(--mg-line); border-radius: var(--radius-full); background: var(--surface-raised); color: var(--text-primary); cursor: pointer; display: inline-block; }
.mg-chips [aria-pressed=true], .mg-radio input:checked + span { background: var(--mg-navy); border-color: var(--mg-navy); color: var(--text-on-dark); }
.mg-radio label { cursor: pointer; }
.mg-radio input { position: absolute; opacity: 0; pointer-events: none; }
.mg-radio input:focus-visible + span { outline: var(--focus-ring-w) solid var(--accent-strong); outline-offset: var(--space-half); }
.mg-prog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.mg-prog button { appearance: none; text-align: start; font: inherit; border: var(--border-w-strong) solid var(--mg-line); border-radius: var(--radius-lg); padding: var(--space-3); background: var(--surface-raised); color: var(--text-primary); cursor: pointer; display: grid; gap: var(--space-half); align-content: start; min-inline-size: 0; }
.mg-prog [aria-checked=true] { border-color: var(--accent-strong); background: var(--success-bg); }
.mg-prog .r { font: var(--weight-bold) var(--text-lg-size) var(--font-num); color: var(--text-link); }
.mg-prog strong { font-size: var(--text-meta-size); }
.mg-prog small { color: var(--text-secondary); font-size: var(--text-meta-size); line-height: 1.35; }
.mg-own { display: grid; gap: var(--space-2); margin-block-start: var(--space-3); }
.mg-own[hidden] { display: none; }
.mg-own label { font-size: var(--text-meta-size); color: var(--text-secondary); }
.mg-own .mg-big { max-inline-size: 11rem; }
.mg-note { margin: 0; font-size: var(--text-meta-size); line-height: 1.5; color: var(--text-secondary); background: var(--surface-sunken); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); }
.mg-res { margin: var(--space-5) var(--space-4) var(--space-4); border-radius: var(--radius-xl); background: var(--mg-navy); color: var(--text-on-dark); padding: var(--space-5) var(--space-6); }
.mg-k { color: var(--navy-sub); font-size: var(--text-meta-size); }
.mg-m { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin: var(--space-1) 0 var(--space-4); }
.mg-m b { font: var(--weight-bold) var(--text-mkt-num-size)/1.1 var(--font-num); letter-spacing: -0.02em; }
.mg-m span { color: var(--navy-sub); }
.mg-bar { block-size: var(--space-2); border-radius: var(--radius-full); background: var(--warning-mark); overflow: hidden; }
.mg-bar i { display: block; block-size: 100%; background: var(--text-accent-on-dark); border-radius: var(--radius-full); transition: inline-size .2s; }
.mg-leg { display: flex; gap: var(--space-4); font-size: var(--text-meta-size); color: var(--navy-sub); margin: var(--space-2) 0 var(--space-4); }
.mg-leg span::before { content: ""; display: inline-block; inline-size: 9px; block-size: 9px; border-radius: var(--radius-xs); margin-inline-end: var(--space-2); background: var(--text-accent-on-dark); }
.mg-leg span + span::before { background: var(--warning-mark); }
.mg-rows { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-5); border-block-start: var(--border-w) solid var(--navy-line); padding-block-start: var(--space-4); margin: 0; }
.mg-rows:empty { display: none; }
.mg-rows div { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--text-meta-size); color: var(--navy-sub); }
.mg-rows dt { margin: 0; } .mg-rows dd { margin: 0; color: var(--text-on-dark); font-weight: var(--weight-strong); font-family: var(--font-num); }
.mg-need { margin: var(--space-4) 0 0; background: var(--navy-800); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); font-size: var(--text-meta-size); color: var(--navy-sub); }
.mg-need:empty { display: none; }
.mg-ctas { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--space-2); margin-block-start: var(--space-4); }
.mg-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-block-size: 3rem; padding: 0 var(--space-5); border-radius: var(--radius-lg); font-weight: var(--weight-strong); text-decoration: none !important; border: var(--border-w) solid transparent; cursor: pointer; font: inherit; font-weight: var(--weight-strong); text-align: center; }
.mg-btn.g { background: var(--success-solid); color: var(--text-on-dark) !important; }
.mg-btn.o { border-color: var(--navy-line); color: var(--text-on-dark) !important; background: transparent; }
.mg-btn.p { background: var(--mg-navy); color: var(--text-on-dark) !important; }
.mg-btn:disabled { opacity: .6; cursor: wait; }
.mg-fine { font-size: var(--text-meta-size); line-height: 1.5; color: var(--text-secondary); padding: 0 var(--space-6) var(--space-5); margin: 0; }

.mg-sec { padding-block: var(--space-8) 0; }
.mg-sec > h2, .mg-side h2 { font-family: var(--font-display); font-size: var(--text-mkt-h2-size); letter-spacing: -0.02em; margin: 0 0 var(--space-2); text-align: center; }
html[dir=rtl] .mg-sec > h2, html[dir=rtl] .mg-side h2 { font-family: var(--font-arabic); letter-spacing: 0; }
.mg-sub { text-align: center; color: var(--text-secondary); margin: 0 0 var(--space-6); }
.mg-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.mg-steps li { border: var(--border-w) solid var(--mg-line); border-radius: var(--radius-lg); padding: var(--space-5); background: var(--surface-raised); }
.mg-steps b { inline-size: 2.25rem; block-size: 2.25rem; border-radius: var(--radius-sm); background: var(--success-bg); color: var(--text-link); display: grid; place-items: center; font-family: var(--font-num); }
.mg-steps h3 { margin: var(--space-4) 0 var(--space-1); font-size: var(--text-lg-size); }
.mg-steps p { margin: 0; color: var(--text-secondary); line-height: 1.5; }
.mg-formwrap { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: var(--space-8); background: var(--surface-sunken); border-radius: var(--radius-2xl); padding: var(--space-8); }
.mg-side h2 { text-align: start; }
.mg-side p { color: var(--text-secondary); line-height: 1.55; }
.mg-yours { background: var(--surface-raised); border: var(--border-w) solid var(--mg-line); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); margin: var(--space-4) 0 0; }
.mg-yours:empty { display: none; }
.mg-yours div { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-block-end: var(--border-w) solid var(--border-subtle); font-size: var(--text-meta-size); }
.mg-yours div:last-child { border: 0; } .mg-yours dt { margin: 0; color: var(--text-secondary); } .mg-yours dd { margin: 0; font-weight: var(--weight-strong); font-family: var(--font-num); text-align: end; }
.mg-form { background: var(--surface-raised); border-radius: var(--radius-xl); border: var(--border-w) solid var(--mg-line); padding: var(--space-6); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-5); align-content: start; }
.mg-form[hidden] { display: none; }
.mg-full { grid-column: 1 / -1; }
.mg-fl { display: grid; gap: var(--space-2); font-weight: var(--weight-strong); font-size: var(--text-meta-size); border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.mg-fl legend { padding: 0; margin-block-end: var(--space-2); font-weight: var(--weight-strong); }
.mg-fl em { font-style: normal; font-weight: var(--weight-regular); color: var(--text-secondary); }
.mg-fl > input, .mg-tel { block-size: 3.1rem; border: var(--border-w-strong) solid var(--mg-line); border-radius: var(--radius-sm); padding: 0 var(--space-3); font: inherit; font-weight: var(--weight-regular); font-size: var(--text-section-size); color: var(--text-primary); background: var(--surface-raised); inline-size: 100%; }
.mg-tel { display: flex; align-items: center; gap: var(--space-3); }
.mg-tel > span { color: var(--text-secondary); padding-inline-end: var(--space-3); border-inline-end: var(--border-w) solid var(--mg-line); }
.mg-tel input { flex: 1; min-inline-size: 0; border: 0; outline: 0; font: inherit; background: none; color: inherit; }
.mg-fl > input:focus, .mg-tel:focus-within { border-color: var(--mg-navy); outline: 0; box-shadow: 0 0 0 var(--space-1) var(--surface-selected); }
.mg-consent { display: flex; gap: var(--space-3); font-size: var(--text-meta-size); color: var(--text-secondary); line-height: 1.5; }
.mg-consent input { inline-size: 1.25rem; block-size: 1.25rem; flex: none; accent-color: var(--primary); margin-block-start: var(--space-half); }
.mg-consent a { color: var(--text-link); }
.mg-err { margin: 0; color: var(--danger-text); font-weight: var(--weight-strong); }
.mg-hp { position: absolute; block-size: 1px; inline-size: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); pointer-events: none; }
.mg-ok { display: grid; place-items: center; text-align: center; gap: var(--space-3); background: var(--surface-raised); border-radius: var(--radius-xl); padding: var(--space-8) var(--space-6); }
.mg-ok[hidden] { display: none; }
.mg-okc { inline-size: 4rem; block-size: 4rem; border-radius: var(--radius-full); background: var(--success-bg); color: var(--text-link); display: grid; place-items: center; font-size: var(--text-kpi-size); }
.mg-ok h3 { margin: 0; font-size: var(--text-display-size); } .mg-ok p { margin: 0; color: var(--text-secondary); } .mg-ok small { color: var(--text-secondary); }
.mg-faq { max-inline-size: 56rem; margin: 0 auto; border-block-start: var(--border-w) solid var(--mg-line); }
.mg-faq details { border-block-end: var(--border-w) solid var(--mg-line); }
.mg-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-1); font-weight: var(--weight-strong); font-size: var(--text-lg-size); }
.mg-faq summary::-webkit-details-marker { display: none; }
.mg-faq summary::after { content: "+"; flex: none; inline-size: 1.9rem; block-size: 1.9rem; border-radius: var(--radius-full); border: var(--border-w) solid var(--mg-line); display: grid; place-items: center; color: var(--text-secondary); font-weight: var(--weight-regular); }
.mg-faq details[open] summary::after { content: "−"; }
.mg-faq p { margin: 0 var(--space-1) var(--space-5); color: var(--text-secondary); line-height: 1.65; max-inline-size: 48rem; }

@media (max-width: 1000px) {
  .mg-hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding-block: var(--space-5); }
  .mg-formwrap { grid-template-columns: minmax(0, 1fr); padding: var(--space-5); gap: var(--space-5); }
}
@media (max-width: 640px) {
  .mg { padding-inline: var(--space-4); }
  .mg-in, .mg-progf { padding-inline: var(--space-4); }
  .mg-tabs { margin-inline: var(--space-3); }
  .mg-res { margin-inline: var(--space-2); padding: var(--space-4); }
  .mg-fine { padding-inline: var(--space-4); }
  .mg-prog small { display: none; }
  .mg-rows, .mg-ctas, .mg-form, .mg-steps { grid-template-columns: minmax(0, 1fr); }
  .mg-form { padding: var(--space-4); }
  .mg-rates { display: none; }
}
.mg { font-family: var(--font-ui); }
.mg-fl legend { font-size: var(--text-meta-size); line-height: inherit; color: var(--text-primary); border: 0; inline-size: auto; }
.mg-in, .mg-f, .mg-fl, .mg-hero > *, .mg-formwrap > * { grid-template-columns: minmax(0, 1fr); min-inline-size: 0; }
.mg-big input, .mg-tel input { inline-size: 0; }
/* Feinh Pro: Tools and the calculator with its client panel */
.tl { display: grid; align-content: start; gap: var(--space-5); padding: var(--page-pad-top) var(--page-pad-x) var(--space-8); max-inline-size: 76rem; }
.tl-sub { margin: var(--space-1) 0 0; color: var(--text-secondary); }
.tl-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); }
.tl-card { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border: var(--border-w) solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-raised); color: var(--text-primary); text-decoration: none; }
.tl-card h2 { margin: var(--space-3) 0 0; font-size: var(--text-title-size); }
.tl-card p { margin: 0; color: var(--text-secondary); line-height: 1.5; }
.tl-card.is-hot { grid-row: span 2; background: var(--primary); border-color: var(--primary); color: var(--text-on-dark); }
.tl-card.is-hot p, .tl-card.is-hot small { color: var(--navy-sub); }
.tl-ic { inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--radius-sm); background: var(--success-bg); color: var(--text-link); display: grid; place-items: center; }
.tl-card.is-hot .tl-ic { background: var(--navy-800); color: var(--text-accent-on-dark); }
.tl-new { position: absolute; inset-block-start: var(--space-4); inset-inline-end: var(--space-4); font-size: var(--text-fine-size); font-weight: var(--weight-strong); background: var(--success-solid); color: var(--text-on-dark); border-radius: var(--radius-full); padding: var(--space-half) var(--space-2); }
.tl-mini { margin-block-start: auto; display: grid; gap: var(--space-1); background: var(--navy-800); border-radius: var(--radius-lg); padding: var(--space-4); }
.tl-mini b { font: var(--weight-strong) var(--text-kpi-size) var(--font-num); }
.tl-go { display: block; text-align: center; background: var(--success-solid); color: var(--text-on-dark); border-radius: var(--radius-lg); padding: var(--space-3); font-weight: var(--weight-strong); margin-block-start: var(--space-3); }
.tl-card.is-wide { grid-column: span 2; background: var(--surface-sunken); border-style: dashed; }
.tl-kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin: var(--space-3) 0 0; }
.tl-kv div { background: var(--surface-raised); border-radius: var(--radius-sm); padding: var(--space-3); } .tl-kv dt { font-size: var(--text-meta-size); color: var(--text-secondary); } .tl-kv dd { margin: 0; font: var(--weight-strong) var(--text-title-size) var(--font-num); }
.tl-crumb { font-size: var(--text-meta-size); color: var(--text-secondary); margin-block-end: var(--space-4); } .tl-crumb a { color: var(--text-link); text-decoration: none; }
.mg.mg-pro { max-inline-size: 76rem; margin: 0; padding: var(--page-pad-top) var(--page-pad-x) var(--space-8); }
.mg-pgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: var(--space-5); align-items: start; }
.mg-pro .mg-calc { box-shadow: var(--elevation-1); }
.mg-panel { display: grid; gap: var(--space-3); padding: var(--space-5); border: var(--border-w) solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-raised); position: sticky; inset-block-start: var(--space-5); }
.mg-panel h2 { margin: 0; font-size: var(--text-body-size); font-weight: var(--weight-strong); }
.mg-who { display: flex; align-items: center; gap: var(--space-3); border: var(--border-w) solid var(--border-default); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); }
.mg-who[hidden], .mg-pick[hidden] { display: none; }
.mg-who b { flex: 1; min-inline-size: 0; overflow-wrap: anywhere; }
.mg-av { display: none; }
.mg-pick { display: grid; gap: var(--space-2); } .mg-pick label { font-size: var(--text-meta-size); color: var(--text-secondary); }
.mg-pick input { font: inherit; min-block-size: var(--control-md); border: var(--border-w) solid var(--border-control); border-radius: var(--radius-sm); padding-inline: var(--space-3); }
.mg-hits { list-style: none; margin: 0; padding: 0; display: grid; } .mg-hits:empty { display: none; }
.mg-hits button { appearance: none; inline-size: 100%; text-align: start; font: inherit; border: 0; background: none; padding: var(--space-2); border-radius: var(--radius-sm); cursor: pointer; display: grid; color: var(--text-primary); }
.mg-hits button:hover, .mg-hits button:focus-visible { background: var(--surface-selected); } .mg-hits small { color: var(--text-secondary); }
.mg-wa { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: var(--text-meta-size); line-height: 1.55; background: var(--success-bg); border: var(--border-w) solid var(--success-border); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); color: var(--text-primary); }
.mg-acts { display: grid; gap: var(--space-2); } .mg-acts .fp-btn { justify-content: flex-start; }
@media (max-width: 1100px) { .mg-pgrid, .tl-grid { grid-template-columns: minmax(0, 1fr); } .tl-card.is-wide { grid-column: auto; } .tl-card.is-hot { grid-row: auto; } .mg-panel { position: static; } }
@media (max-width: 760px) { .tl, .mg.mg-pro { padding: var(--space-4) var(--space-4) var(--space-8); } }
.tl-card h2 { color: inherit; font-weight: var(--weight-strong); }
.mg-pro .mg-ctas { grid-template-columns: minmax(0, 1fr); }
.mg-pro .mg-ctas .mg-btn.g { display: none; }
/* the calculator inside Feinh Pro: a page title like every other screen (design system pass) */
.mg-pro .mg-pro-h1 { margin: var(--space-2) 0 var(--space-4); font-family: var(--font-display); font-size: var(--text-title-size); line-height: var(--text-title-lh); font-weight: var(--weight-strong); letter-spacing: var(--tracking-tight); }