.mortgage-calculator{margin:0 22px 28px;padding:52px 5% 28px;border:2px solid #79a99b;border-radius:24px;background:radial-gradient(ellipse at 50% 0,#1a413044,transparent 65%),#09120e;box-shadow:inset 0 1px 0 #d2ffe511,0 12px 28px #0004}
.mortgage-calculator h2{text-align:center;margin-bottom:36px}
.calculator-fields{display:grid;grid-template-columns:1.3fr 1.2fr 1fr auto;gap:20px;align-items:end}
.calculator-fields label{font-size:14px;color:#cbe2d5;margin:0}
.calculator-input{display:flex;align-items:center;gap:8px;margin-top:10px;border:1px solid #719780;border-radius:13px;padding:0 16px;background:linear-gradient(145deg,#ffffff0c,#ffffff02),#101f17;box-shadow:inset 0 1px 0 #ffffff16,0 4px 10px #0003;height:60px}
.calculator-input input{width:100%;min-width:0;margin:0;padding:15px 0;border:0;background:transparent;font-size:17px;box-shadow:none;color:#effaf3}
.calculator-input>span{color:#96b4a3;font-size:13px;white-space:nowrap}
.calculator-input:focus-within{outline:2px solid #a1d6b9;outline-offset:3px}
.calculator-input input:focus-visible{outline:0}
.calculate-button{height:60px;padding:0 27px;border:1px solid #b6e5c68c;border-radius:13px;color:#eafff0;background:linear-gradient(145deg,#53897099,#0b5d4480);box-shadow:inset 0 1px 0 #ffffff55,0 3px 0 #031c2380,0 10px 24px #0005;font-weight:600;display:flex;justify-content:center;align-items:center;gap:25px;transition:transform .2s,box-shadow .2s}
.calculate-button:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 #ffffff80,0 14px 25px #0006}
.calculate-button:active{transform:translateY(1px)}
.calculator-preview-note{text-align:center;font-size:12px;color:#9cb6a7;margin:17px 0 30px}
.bank-carousel-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid #365744;padding-top:24px;margin-bottom:17px;color:#d6eadf;font-size:14px}
.bank-carousel-controls{display:flex;gap:8px}
.bank-carousel-controls button{height:36px;width:36px;border:1px solid #60856e;border-radius:50%;background:#183225;color:#dff5e7;font-size:18px}
.bank-carousel-controls button:hover{background:#2a4e3a}
.bank-carousel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 16px;scrollbar-width:thin;scrollbar-color:#4f7c62 #102018}
@keyframes mme-card-gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.bank-rate-card{flex:0 0 172px;scroll-snap-align:start;display:flex;align-items:center;flex-direction:column;border:1px solid rgba(87,204,137,.62);border-radius:17px;background:linear-gradient(120deg,#1d3526,#173e2a,#287e4d,#0f2116);background-size:300% 300%;animation:mme-card-gradient 6s ease-in-out infinite;padding:17px 15px 21px;box-shadow:inset 0 1px 0 #ffffff12,0 12px 30px rgba(24,112,65,.17)}
.bank-rate-card:nth-child(2n){animation-delay:-1.5s}
.bank-rate-card:nth-child(3n){animation-delay:-3s}
@media(prefers-reduced-motion:reduce){.bank-rate-card{animation:none;background-position:50% 50%}}
.bank-logo-frame{width:140px;height:88px;display:grid;place-items:center;border-radius:9px;overflow:hidden;background:white;margin-bottom:12px}
.bank-logo-frame img{width:120px;height:76px;object-fit:contain;display:block}
.bank-logo-frame img[src$="MASHREQ.jpeg"]{transform:scale(1.7)}
.bank-logo-frame img[src$="DIB.jpeg"]{transform:scale(1.25)}
.bank-logo-frame img[src$="ENBD.jpeg"]{transform:scale(1.12)}
/* Flatten the pale checkerboard in these supplied logos onto white. */
.bank-logo-frame img[src$="ENBD.jpeg"],.bank-logo-frame img[src$="HSBC.jpeg"]{background:#fff;filter:brightness(1.18)}
.eligibility-invite{margin:0 22px 28px;border:2px solid #79a99b;border-radius:24px;background:linear-gradient(120deg,#102c24,#091b18);overflow:hidden}
.eligibility-invite>a{display:flex;align-items:center;justify-content:center;gap:28px;padding:42px 5%;color:#e4efea;text-decoration:none;transition:background .2s}
.eligibility-invite h2{margin:0;font-size:clamp(24px,3vw,36px);line-height:1.35;text-align:center;overflow-wrap:anywhere}
.eligibility-invite>a>span{flex-shrink:0;font-size:30px}
.eligibility-invite>a:hover{background:#ffffff08}
.eligibility-invite>a:focus-visible{outline:3px solid #b7efd5;outline-offset:-6px}
@media(max-width:650px){.eligibility-invite{margin:0 12px 28px;border-radius:19px}.eligibility-invite>a{padding:30px 22px;gap:15px}}
.bank-name{font-size:12px;letter-spacing:.5px;color:#b9d2c3;margin-bottom:5px}
.bank-rate-card>strong{font-family:Manrope,sans-serif;font-size:32px;line-height:1.2;font-weight:600;color:#e2f6e9}
.bank-rate-card>strong>span{font-size:19px;margin-left:2px}
.fixed-period{font-size:13px;color:#a5c6b3;margin-top:7px}
.bank-rate-note{font-size:12px;color:#95ae9e;text-align:center;margin:12px 0 0}
@media(max-width:1050px){.calculator-fields{grid-template-columns:1fr 1fr}.calculate-button{width:100%}}
@media(max-width:650px){.mortgage-calculator{margin:0 12px 28px;padding:35px 22px 23px;border-radius:19px}.mortgage-calculator h2{font-size:30px;letter-spacing:-1px}.calculator-fields{grid-template-columns:1fr;gap:18px}.bank-rate-card{flex-basis:162px}.bank-logo-frame{width:130px}.calculator-preview-note{margin-bottom:24px}}
.calculator-layout{display:grid;grid-template-columns:minmax(240px,1fr) minmax(0,1.8fr);gap:24px 30px;align-items:stretch}
.calculator-fields{display:flex;flex-direction:column;gap:18px;align-items:stretch;justify-content:flex-start}
.calculator-banks{min-width:0;border:1px solid #618a71;border-radius:17px;padding:18px;background:linear-gradient(140deg,#18322266,#0c1912);display:flex;flex-direction:column;justify-content:center}
.calculator-banks .bank-carousel-heading{border:0;padding-top:0;margin-bottom:12px}
.calculator-layout>.calculate-button{grid-column:1 / -1;width:100%}
.calculator-preview-note{margin:17px 0 10px}
@media(max-width:650px){.calculator-layout{grid-template-columns:1fr;gap:22px}.calculator-banks{padding:15px}.calculator-layout>.calculate-button{grid-column:1}}
.calculator-actions{grid-column:1 / -1;display:grid;grid-template-columns:1fr;gap:20px;align-items:stretch}
.has-result .calculator-actions{grid-template-columns:1fr 1fr}
.calculator-actions .calculate-button{width:100%;height:auto;min-height:70px}
.monthly-result{padding:14px 20px;border:1px solid #8dcfa7;border-radius:13px;background:linear-gradient(140deg,#234c36,#11291b);text-align:center;box-shadow:inset 0 1px 0 #ffffff25}
.monthly-result>span{display:block;font-size:13px;color:#bedbc9}
.monthly-result>strong{display:block;font-family:Manrope,sans-serif;font-size:clamp(23px,2.6vw,36px);font-weight:750;color:#e7fff0;overflow-wrap:anywhere;line-height:1.4}
#graph-panel{width:100%}
#graph-panel h3{text-align:center;font-size:18px;font-weight:600;margin:0 0 8px}
#balance-chart{display:block;width:100%;max-width:650px;height:250px;min-height:0;margin:0 auto}
#balance-chart text{fill:#cce2d5;font-size:12px;font-family:'DM Sans',sans-serif}
.calculator-banks [hidden],.calculator-actions [hidden],.bank-rate-note[hidden]{display:none!important}
@media(max-width:650px){.has-result .calculator-actions{grid-template-columns:1fr}#balance-chart{height:auto;min-height:0}}
@media(prefers-reduced-motion:reduce){.calculate-button:hover,.calculate-button:active{transform:none}}