/* =========================================
   EMI CALCULATOR
   Page-level styles for /tools/emi-calculator (tools/emi-calculator/index.html).
   Loads after: tailwind, site, launch, consumer-bar.
   Sections: EMI guide · FAQ · Result-card links
   Add new styles for this page here, inside the matching section.
   ========================================= */

/* ---------- EMI guide ---------- */
/* Formula, worked example, 16% EMI table and next step, between the calculator and the FAQ (crawlable plain text). */
.emi-guide{padding-block:clamp(40px,5vw,72px) 0}
.emi-guide>.shell{max-width:1120px}
.emi-guide__body{max-width:820px}
.emi-guide__body h2{margin-top:52px}
.emi-guide__body h2:first-child{margin-top:0}
.emi-guide__body h3{margin-top:28px}
.emi-guide__formula{padding:18px 22px;border:1px solid var(--line);border-radius:12px;background:var(--mist);font-family:'IBM Plex Mono',monospace;font-size:16px;overflow-x:auto}
.emi-guide__body caption{caption-side:bottom;padding-top:12px;text-align:left;font-size:14px;line-height:1.55;color:var(--muted)}
.emi-guide__next{margin-top:44px;padding:26px 28px;border:1px solid var(--line);border-radius:15px;background:#fff}
.emi-guide__next p{margin:0}
.emi-guide .emi-guide__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:18px}
@media(max-width:639px){
  .emi-guide__next{padding:22px 18px}
  .emi-guide .emi-guide__actions{flex-direction:column;align-items:stretch;text-align:center}
}

/* ---------- FAQ ---------- */
/* /tools/emi-calculator FAQ: heading beside the shared .faq-list accordion, aligned to the calculator's 1120px width.
   Mirrors the layout used for the FAQ on /personal-loan/rates-and-charges. */
.emi-faq{padding-block:clamp(48px,6vw,84px) clamp(56px,7vw,94px);scroll-margin-top:108px}
.emi-faq .emi-faq__layout{max-width:1120px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:80px;align-items:start}
.emi-faq .faq-list{min-width:0}
.emi-faq .faq-answer p{margin:0}
@media(max-width:1023px){
  .emi-faq .emi-faq__layout{grid-template-columns:minmax(0,1fr);gap:28px}
}

/* ---------- Result-card links ---------- */
/* The text links inside the result cards ("Check what you can afford", "Check eligibility") inherited plain body text.
   Give them the same green underlined style as links elsewhere on the site. */
.result-card p a:not(.button){color:var(--forest);font-weight:600;text-decoration:none;text-underline-offset:3px}
.result-card p a:not(.button):hover{color:var(--navy)}