/* EMI calculator page (.em-*). Theme 5A teal with warm gold. Dashboard-style tool page. */
.em{--teal:#0B6E63;--deep:#0B4A4A;--deep-2:#0D3F45;--gold:#D9A85B;--gold-2:#EBC98E;--ink:#0F2233;--muted:#52606B;--line:#DDE5E3;--tint:#F1F7F5;--soft:#F8F6F2;color:var(--ink)}
.em h1,.em h2,.em h3{font-family:'Manrope',Arial,sans-serif;margin:0;color:var(--ink)}
.em :where(p){margin:0;color:var(--muted);line-height:1.6}
.em [id]{scroll-margin-top:96px}
.em [hidden]{display:none!important}
.em button{font-family:inherit}

/* Hero */
.em-hero{padding:44px 0 88px;text-align:center;background:radial-gradient(700px 300px at 15% 0,rgba(11,110,99,.18),transparent 65%),radial-gradient(600px 280px at 90% 10%,rgba(217,168,91,.22),transparent 65%),linear-gradient(180deg,var(--soft),#fff)}
.em-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--teal);font-size:12px;font-weight:800;letter-spacing:.13em;margin-bottom:14px}
.em-hero h1{font-size:clamp(32px,4.2vw,50px);line-height:1.08;letter-spacing:-.035em;font-weight:800}
.em-hero h1 span{color:var(--teal)}
.em-hero p{max-width:600px;margin:14px auto 0;font-size:17px}
.em-presets{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin-top:22px}
.em-presets>span{font-size:13px;font-weight:700;color:var(--muted);margin-right:4px}
.em-presets button{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:13.5px;font-weight:700;color:var(--deep);cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease}
.em-presets button svg{color:var(--teal)}
.em-presets button:hover{border-color:var(--teal);transform:translateY(-1px)}
.em-presets button.on{background:var(--deep);border-color:var(--deep);color:#fff}
.em-presets button.on svg{color:var(--gold-2)}
.em-presets button:focus-visible{outline:3px solid rgba(11,110,99,.4);outline-offset:2px}

/* Sections */
.em-section{padding:52px 0}
.em-tint{background:var(--tint)}
.em-eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--gold);margin-bottom:8px}
.em h2{font-size:clamp(22px,2.4vw,30px);line-height:1.2;letter-spacing:-.025em;font-weight:800}

/* Calculator */
.em-calcsec{padding:0 0 52px;margin-top:-56px;position:relative;z-index:2}
.em-calc{display:grid;grid-template-columns:1.1fr .9fr;border-radius:26px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 28px 60px rgba(15,34,51,.16)}
.em-inputs{padding:30px 34px;display:grid;gap:20px;align-content:start}
.em-field{display:grid;gap:8px;min-width:0}
.em-field>label,.em-labrow label{font-size:14px;font-weight:700}
.em-field>label em,.em-labrow em{font-style:normal;font-weight:500;font-size:12px;color:var(--muted);margin-left:4px}
.em-labrow{display:flex;justify-content:space-between;align-items:center;gap:10px}
.em-inp{display:flex;align-items:center;height:48px;border:1.5px solid var(--line);border-radius:12px;background:#fff;transition:border-color .15s ease,box-shadow .15s ease}
.em-inp:focus-within{border-color:var(--teal);box-shadow:0 0 0 4px rgba(11,110,99,.13)}
.em-inp i{font-style:normal;font-weight:800;color:var(--teal);padding:0 4px 0 14px}
.em-inp i.r{padding:0 14px 0 4px;color:var(--muted);font-weight:700;font-size:14px}
.em .em-inp input{flex:1;min-width:0;height:100%;border:0;background:transparent;padding:0 14px;font:inherit;font-size:17px;font-weight:800;color:var(--ink);outline:0;box-shadow:none;-moz-appearance:textfield;appearance:textfield}
.em .em-inp i+input{padding-left:4px}
.em .em-inp input::-webkit-outer-spin-button,.em .em-inp input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.em .em-inp input::placeholder{color:#A0ABB1;font-weight:600}
.em input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;padding:0;margin:4px 0 0;border:0;border-radius:99px;outline:0;cursor:pointer;background:linear-gradient(90deg,var(--teal) var(--fill,30%),#E3ECE9 var(--fill,30%))}
.em input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:4px solid var(--teal);box-shadow:0 3px 9px rgba(11,74,74,.35)}
.em input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:4px solid var(--teal)}
.em input[type=range]:focus-visible{outline:3px solid rgba(11,110,99,.35);outline-offset:6px}
.em-field>small{display:flex;justify-content:space-between;font-size:11.5px;color:#8A969C}
.em-field>small.em-note{justify-content:flex-start;color:var(--muted);font-size:12px}
.em-unit{display:inline-flex;padding:3px;border-radius:999px;background:var(--tint);border:1px solid var(--line)}
.em-unit button{all:unset;box-sizing:border-box;padding:5px 14px;border-radius:999px;font-size:12.5px;font-weight:800;color:var(--muted);cursor:pointer}
.em-unit button[aria-pressed=true]{background:var(--deep);color:#fff}
.em-unit button:focus-visible{outline:3px solid rgba(11,110,99,.4);outline-offset:1px}
.em-more{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:6px;border-top:1px dashed var(--line)}
.em-more .em-inp{height:44px}
.em-more .em-inp input{font-size:15px}
.em-error{padding:10px 14px;border-radius:10px;background:#FFF1EC;border:1px solid #F3C9BA;color:#8C3A1F;font-size:13.5px;font-weight:600}

/* Result panel */
.em-result{background:radial-gradient(420px 260px at 100% 0,rgba(217,168,91,.28),transparent 65%),linear-gradient(160deg,var(--deep),var(--deep-2));color:#fff;padding:30px 32px;display:grid;gap:20px;align-content:center}
.em-emi small{display:block;font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--gold-2)}
.em-emi strong{display:block;font-size:clamp(38px,4.2vw,52px);letter-spacing:-.04em;font-weight:800;line-height:1.05;margin:4px 0 2px;color:#fff;font-variant-numeric:tabular-nums}
.em-emi span{font-size:14px;color:rgba(255,255,255,.72)}
.em-top{display:flex;justify-content:space-between;align-items:center;gap:20px}
.em-donut{--p:60%;flex:none;width:150px;height:150px;border-radius:50%;background:conic-gradient(#63C4B5 0 var(--p),var(--gold) var(--p) 100%);display:grid;place-items:center}
.em-donut>div{width:106px;height:106px;border-radius:50%;background:var(--deep-2);display:grid;place-content:center;text-align:center}
.em-donut small{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.65);font-weight:700}
.em-donut b{font-size:22px;letter-spacing:-.02em;color:#fff}
.em-legend{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.em-legend li{position:relative;display:grid;gap:3px;padding:12px 14px 12px 18px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);font-size:12.5px;font-weight:700;letter-spacing:.02em;color:rgba(255,255,255,.72)}
.em-legend li i{position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:0 4px 4px 0}
.em-legend .p{background:#63C4B5}.em-legend .i{background:var(--gold)}.em-legend .f{background:#fff}
.em-legend b{color:#fff;font-size:17px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.em-first{display:grid;gap:8px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.em-firsthead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:12.5px;font-weight:700;color:rgba(255,255,255,.72)}
.em-firsthead b{color:#fff;font-size:13.5px;font-variant-numeric:tabular-nums}
.em-firstbar{display:flex;height:12px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.12)}
.em-firstbar i{display:block;height:100%;transition:width .25s ease}
.em-firstbar .i,.em-firstkey .i{background:var(--gold)}
.em-firstbar .p,.em-firstkey .p{background:#63C4B5}
.em-firstkey{display:flex;gap:16px;font-size:11.5px;color:rgba(255,255,255,.6);font-weight:600}
.em-firstkey span{display:inline-flex;align-items:center;gap:6px}
.em-firstkey i{width:9px;height:9px;border-radius:3px}
.em-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.em-facts>div{padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.em-facts small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.62)}
.em-facts b{display:block;margin-top:2px;font-size:19px;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.em-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:16px;border-top:1px dashed rgba(255,255,255,.25)}
.em-total span{font-size:14px;font-weight:700;color:rgba(255,255,255,.8)}
.em-total b{font-size:26px;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}

/* Chart + what-if */
.em-two{display:grid;grid-template-columns:1.5fr 1fr;gap:22px;align-items:stretch}
.em-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px 24px;box-shadow:0 12px 28px rgba(15,34,51,.06)}
.em-card header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.em-card h2{font-size:19px;letter-spacing:-.02em}
.em-key{display:flex;gap:14px;font-size:12.5px;font-weight:700;color:var(--muted)}
.em-key span{display:inline-flex;align-items:center;gap:6px}
.em-key i{width:11px;height:11px;border-radius:3px}
.em-key .p{background:var(--teal)}.em-key .i{background:var(--gold)}
.em-chart svg{display:block;width:100%;height:auto}
.em-chart .gl{stroke:#E6ECEA;stroke-width:1}
.em-chart .ax{font-size:11px;fill:#7A878E;font-family:inherit}
.em-chart .bp{fill:var(--teal)}
.em-chart .bi{fill:var(--gold)}
.em-chart .bar:hover rect{opacity:.8}
.em-cap{font-size:13px;margin-top:6px}
.em-what{display:flex;flex-direction:column}
.em-whatbody{flex:1;display:grid;gap:14px;align-content:start}
.em .em-hint{font-size:13.5px;line-height:1.55;padding:12px 14px;border-radius:12px;background:var(--tint)}
.em-save{padding:16px 18px;border-radius:14px;background:linear-gradient(135deg,#FFF6DE,#FBE6B4);border:1px solid #EBCF86}
.em-save small{display:block;font-size:11.5px;font-weight:800;letter-spacing:.1em;color:#7A5A10}
.em-save strong{display:block;font-size:30px;letter-spacing:-.03em;font-weight:800;color:#3E2C05;margin-top:2px}
.em-cmp{list-style:none;margin:0;padding:0;display:grid;gap:0}
.em-cmp li{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:14px}
.em-cmp li:last-child{border-bottom:0}
.em-cmp span{color:var(--muted)}
.em-cmp b{font-variant-numeric:tabular-nums}
.em-cmp b.ok{color:#1F7A4D}

/* Schedule */
.em-schedhead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.em-schedhead p{margin-top:4px;font-size:15px}
.em-schedtools{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.em-tabs{display:inline-flex;padding:4px;border-radius:12px;background:var(--tint);border:1px solid var(--line)}
.em-tabs button{all:unset;box-sizing:border-box;padding:8px 18px;border-radius:9px;font-size:14px;font-weight:800;color:var(--muted);cursor:pointer}
.em-tabs button[aria-selected=true]{background:var(--deep);color:#fff}
.em-tabs button:focus-visible{outline:3px solid rgba(11,110,99,.4);outline-offset:1px}
.em-csv{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:12px;border:1.5px solid var(--deep);color:var(--deep);font-size:14px;font-weight:800;cursor:pointer;transition:background .15s ease,color .15s ease}
.em-csv:hover{background:var(--deep);color:#fff}
.em-csv:focus-visible{outline:3px solid rgba(11,110,99,.4);outline-offset:2px}
.em-tablewrap{border:1px solid var(--line);border-radius:16px;overflow:auto;background:#fff;max-height:440px}
.em-table{width:100%;border-collapse:collapse;font-size:14.5px;font-variant-numeric:tabular-nums}
.em-table th{position:sticky;top:0;background:var(--deep);color:#fff;text-align:right;padding:12px 18px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;white-space:nowrap}
.em-table td{text-align:right;padding:11px 18px;border-top:1px solid #EEF2F0;white-space:nowrap}
.em-table th:first-child,.em-table td:first-child{text-align:left;font-weight:800}
.em-table tbody tr:nth-child(even){background:#FAFCFB}
.em-table tbody tr:hover{background:var(--tint)}

/* Locked schedule gate */
.em-lock{position:relative}
.em-lock.is-locked{min-height:540px}
.em-lock.is-locked .em-tablewrap{filter:blur(5px);pointer-events:none;user-select:none;max-height:540px;overflow:hidden}
.em-mask{color:#9AA7AD;letter-spacing:.08em;font-weight:700}
.em-gate{display:none}
.em-lock.is-locked .em-gate{display:grid;position:absolute;inset:0;place-items:center;padding:16px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(241,247,245,.7))}
.em-gatecard{width:min(400px,100%);display:grid;gap:12px;padding:26px 26px 22px;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:0 24px 54px rgba(15,34,51,.2);text-align:left}
.em-lockico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#FBF1DC,#F3D9A0);color:#7A5A10}
.em-gatecard h3{font-size:20px;letter-spacing:-.02em;font-weight:800}
.em .em-gatecard>p{font-size:14px;line-height:1.55}
.em-gfield{display:grid;gap:6px}
.em-gfield label{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:700}
.em-gfield label b{font-size:12px;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums}
.em-gfield label b.ok{color:#1F7A4D}
.em-gfield label b.bad{color:#C0532F}
.em .em-gfield input{height:46px;padding:0 14px;border:1.5px solid var(--line);border-radius:12px;background:#fff;font:inherit;font-size:15.5px;font-weight:600;color:var(--ink);outline:0;box-shadow:none;transition:border-color .15s ease,box-shadow .15s ease}
.em .em-gfield input:focus{border-color:var(--teal);box-shadow:0 0 0 4px rgba(11,110,99,.13)}
.em .em-gfield input::placeholder{color:#A0ABB1;font-weight:500}
.em .em-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.em-gfields{display:grid;gap:12px;animation:emIn .28s ease}
@keyframes emIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.em-gerr{padding:9px 12px;border-radius:10px;background:#FFF1EC;border:1px solid #F3C9BA;color:#8C3A1F;font-size:13px;font-weight:600}
.em-gbtn{display:flex;align-items:center;justify-content:center;gap:9px;height:50px;border:0;border-radius:13px;cursor:pointer;background:linear-gradient(135deg,var(--teal),var(--deep));color:#fff;font-size:15.5px;font-weight:800;box-shadow:0 10px 22px rgba(11,110,99,.32);transition:transform .15s ease,box-shadow .15s ease}
.em-gbtn:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(11,110,99,.4)}
.em-gbtn:focus-visible{outline:3px solid rgba(217,168,91,.7);outline-offset:3px}
.em-gbtn:disabled{opacity:.7;cursor:progress;transform:none}
.em-gnote{font-size:12px;line-height:1.5;color:var(--muted)}
.em-gnote a{color:var(--teal);font-weight:700}
.em-csv.is-locked{opacity:.55;border-style:dashed}
.em-lock.is-opening .em-tablewrap{animation:emReveal .6s ease}
@keyframes emReveal{from{filter:blur(6px);opacity:.4}to{filter:blur(0);opacity:1}}

/* How it works */
.em-tips{display:block}
.em-tipshead{margin-bottom:22px}
.em-tips ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.em-tips li{display:flex;flex-direction:column;gap:12px;padding:20px 20px 22px;background:#fff;border:1px solid var(--line);border-radius:16px;transition:transform .2s ease,box-shadow .2s ease}
.em-tips li:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(15,34,51,.08)}
.em-tips li>span{width:38px;height:38px;border-radius:12px;background:#FBF1DC;color:#9A6B00;display:grid;place-items:center;flex:none}
.em-tips li:nth-child(2)>span{background:#DFF3EF;color:var(--teal)}
.em-tips li:nth-child(3)>span{background:#E4EEF6;color:#3B78B0}
.em-tips li:nth-child(4)>span{background:#F6E4DA;color:#B0603A}
.em-tips b{font-size:16px;line-height:1.3}
.em-tips p{font-size:14px;margin-top:4px;line-height:1.55}

/* Apply band */
.em-apply{background:linear-gradient(135deg,var(--deep),var(--deep-2));padding:38px 0;color:#fff}
.em-apply .container{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.em-apply small{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--gold-2)}
.em-apply h2{color:#fff;margin:6px 0 8px}
.em .em-apply p{color:rgba(255,255,255,.72);font-size:14px}
.em-apply ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.em-apply a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.28);color:#fff;font-weight:700;font-size:14px;text-decoration:none;transition:background .15s ease,border-color .15s ease,color .15s ease}
.em-apply a:hover{background:var(--gold);border-color:var(--gold);color:#1E1608}

/* Tablet & mobile */
@media (max-width:1024px){
  .em-two{grid-template-columns:1fr}
  .em-tips ul{grid-template-columns:repeat(2,1fr)}
  .em-apply .container{grid-template-columns:1fr;gap:20px}
}
@media (max-width:860px){
  .em-hero{padding:34px 0 76px}
  .em-calc{grid-template-columns:1fr}
  .em-inputs{padding:24px 22px}
  .em-result{padding:26px 22px}
  .em-section{padding:40px 0}
}
@media (max-width:560px){
  .em-more{grid-template-columns:1fr}
  .em-top{flex-direction:column;align-items:flex-start}
  .em-presets>span{width:100%;text-align:center}
  .em-tips ul{grid-template-columns:1fr}
  .em-table th,.em-table td{padding:10px 12px}
}
@media (prefers-reduced-motion:reduce){.em *{transition:none!important}}