/* =====================================================================================================================
   Product page group: loans/, the five product pages, emi-calculator/ and repay-loan/.
   Only the pieces these pages share and psl-site.css does not have; tokens and every other component come from psl-site.css
   (the hero card head .pl-card__*, the quick-start card .pl-start-card, the navy box .pl-box--navy and the four-step
   .pl-timeline--4 live there; the general loan calculator is psl-calculator.css).
   sp-best     "Best for" cards under the product intro
   sp-glance   "at a glance" panel placed beside its section head
   sp-calc-*   emi-calculator hero: intro, the general loan calculator, then the formula list + quick-start card
   sp-formula  the calculator formula list (emi-calculator)
   sp-warn     amber warning callout with an icon (repay-loan)
   sp-repay    the repay card (repay-loan)
   sp-explore  "Explore loans" link block above the footer (its link texts differ from the footer's, so it stays)
===================================================================================================================== */

/* ---------------------------------------------------------------- "Best for" cards */
.sp-best { margin-top: 32px; }
.sp-best .pl-h3 { margin-bottom: 14px; }
.sp-best__list { margin-bottom: 20px; }
.sp-best__list > li { display: flex; align-items: center; gap: 14px; }
.sp-best__list .pl-badge { flex: none; }
.sp-best__list p { font-weight: 600; color: var(--psl-ink); }

/* ---------------------------------------------------------------- at a glance beside its head */
.sp-glance { margin: 0; }
.sp-glance .pl-glance__grid { border-top: 0; border-bottom: 0; }
.sp-glance .pl-glance__grid dd { font-size: 1.12rem; }
.pl-table-wrap + .sp-glance { margin-top: 24px; }

/* ---------------------------------------------------------------- formula (emi-calculator) */
.pl-hero--calc { padding-bottom: 40px; }
.pl-hero--calc::before { display: none; }
.sp-calc-intro { max-width: 760px; margin-bottom: 20px; }
.sp-calc-intro .pl-lead { margin-bottom: 0; }
.sp-calc-more { display: grid; gap: 20px; margin-top: 24px; }
.sp-calc-more > * { min-width: 0; margin: 0; }
@media (min-width: 992px) {
    .pl-hero--calc { padding-bottom: 56px; }
    .sp-calc-intro { margin-bottom: 28px; }
    .sp-calc-more { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 28px; align-items: start; margin-top: 28px; }
    .sp-calc-more .sp-formula { max-width: none; }
}
.sp-formula { max-width: 520px; margin-top: 8px; }
.sp-formula .pl-h3 { margin-bottom: 10px; }
.sp-formula ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sp-formula li { position: relative; padding-left: 18px; font-size: .92rem; line-height: 1.5; color: var(--psl-ink-2); }
.sp-formula li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--psl-grad); }
.sp-formula b { color: var(--psl-navy-900); }

/* ---------------------------------------------------------------- warning callout (repay-loan) */
.sp-warn { display: flex; gap: 10px; align-items: flex-start; max-width: 560px; }
.sp-warn svg { margin-top: 2px; color: var(--psl-amber); }
.sp-warn p { margin: 0; }

/* ---------------------------------------------------------------- repay card */
.sp-repay__rows { margin-bottom: 14px; }
.sp-repay__rows dd { max-width: 55%; }
.sp-repay__btns { display: grid; gap: 12px; margin: 0 0 14px; }
.sp-repay__btns .pl-btn { white-space: normal; text-align: center; overflow-wrap: anywhere; }
.sp-repay__end { margin: 0; text-align: center; }

/* ---------------------------------------------------------------- explore links */
.sp-explore__title { margin: 0 0 18px; font-family: var(--psl-font-display); font-size: 1.25rem; font-weight: 800; color: var(--psl-navy-900); }
.sp-explore__grid { display: grid; gap: 22px; }
.sp-explore__grid h3 { margin: 0 0 10px; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--psl-ink-3); }
.sp-explore__grid ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sp-explore__grid .sp-explore__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.sp-explore__grid a { font-size: .92rem; font-weight: 500; color: var(--psl-navy-800); text-decoration: none; }
.sp-explore__grid a:hover { color: var(--psl-blue); text-decoration: underline; }

@media (min-width: 768px) {
    .sp-best__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sp-explore__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
}

/* responsive audit: 14 px minimum text on phones */
@media (max-width: 767.98px) {
    .sp-explore__grid h3 { font-size: .875rem; }
}

/* responsive audit: at 992-1199 px the side panel is narrow, so the six facts go two-up ("₹30,000/month" fits) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .sp-glance .pl-glance__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* phones under 400 px: one fact per row, so "₹30,000/month" never spills out of its cell */
@media (max-width: 399.98px) {
    .sp-glance .pl-glance__grid { grid-template-columns: minmax(0, 1fr); }
}