/* Mobile refinements — loaded LAST (footer.php) so it overrides page-level CSS.
   Goals: compact sections, cards two-up per row, no horizontal overflow. */

@media (max-width:820px){
  /* Sidebar layouts: let the grid child shrink so the pill rails scroll inside, not the page */
  .fq-layout,.lg-layout{grid-template-columns:minmax(0,1fr)}
  .fq-layout>*,.lg-layout>*{min-width:0}
  .fq-rail nav,.lg-toc nav{max-width:100%}
}

@media (max-width:640px){
  body{overflow-x:clip}
  .container{padding-left:16px;padding-right:16px}

  /* ---------- Smaller sections ---------- */
  main section:not([class*="ribbon"]):not([class*="marquee"]):not([class*="strip"]),
  .section{padding-top:34px;padding-bottom:34px}
  main section[class*="hero"],.hm-hero{padding-top:26px;padding-bottom:30px}
  .section-heading,.section-heading.compact{margin-bottom:18px}
  h1{font-size:clamp(27px,8vw,34px);line-height:1.15}
  h2{font-size:clamp(22px,6.2vw,27px);line-height:1.2}
  h3{font-size:17px}
  p{line-height:1.55}
  main section p,main section li{font-size:14.5px}


  /* ---------- Concise sections: drop eyebrows + intro sub-copy under section titles ---------- */
  .hm-head>[class*="eyebrow"],.hm-head>.eyebrow,
  .pl-head>[class*="eyebrow"],.pl-head>.eyebrow,
  .hl-head>[class*="eyebrow"],.hl-head>.eyebrow,
  .lp-head>[class*="eyebrow"],.lp-head>.eyebrow,
  .gl-head>[class*="eyebrow"],.gl-head>.eyebrow,
  .cc3-title>[class*="eyebrow"],.cc3-title>.eyebrow,
  .el-head>[class*="eyebrow"],.el-head>.eyebrow,
  .bl2-head>[class*="eyebrow"],.bl2-head>.eyebrow,
  .eb-head>[class*="eyebrow"],.eb-head>.eyebrow,
  .pt-head>[class*="eyebrow"],.pt-head>.eyebrow,
  .ab-head>[class*="eyebrow"],.ab-head>.eyebrow,
  .ct-head>[class*="eyebrow"],.ct-head>.eyebrow,
  .np-head>[class*="eyebrow"],.np-head>.eyebrow,
  .sm-head>[class*="eyebrow"],.sm-head>.eyebrow,
  .fq-help-head>[class*="eyebrow"],.fq-help-head>.eyebrow,
  .bg-next-head>[class*="eyebrow"],.bg-next-head>.eyebrow,
  .gz-basics-head>[class*="eyebrow"],.gz-basics-head>.eyebrow,
  .section-heading>[class*="eyebrow"],.section-heading>.eyebrow,
  .section-intro{display:none!important}
  .hm-head>p:not(.gl-note),
  .pl-head>p:not(.gl-note),
  .hl-head>p:not(.gl-note),
  .lp-head>p:not(.gl-note),
  .gl-head>p:not(.gl-note),
  .cc3-title>p:not(.gl-note),
  .el-head>p:not(.gl-note),
  .bl2-head>p:not(.gl-note),
  .eb-head>p:not(.gl-note),
  .pt-head>p:not(.gl-note),
  .ab-head>p:not(.gl-note),
  .ct-head>p:not(.gl-note),
  .np-head>p:not(.gl-note),
  .sm-head>p:not(.gl-note),
  .fq-help-head>p:not(.gl-note),
  .bg-next-head>p:not(.gl-note),
  .gz-basics-head>p:not(.gl-note),
  .section-heading>p:not(.gl-note){display:none!important}
  .hm-head,.pl-head,.hl-head,.lp-head,.gl-head,.cc3-title,.el-head,.bl2-head,.eb-head,.pt-head,.ab-head,.ct-head,.np-head,.sm-head,.section-heading{margin-bottom:16px!important}

  .rel3-eyebrow,.lf3-eyebrow,.rel3-head>p,.rel3>div>p{display:none!important}

  /* ---------- Card grids: two per row ---------- */
  .hm-tiles,.hm-steps,.hm-kinds,.hm-metrics,.hm-learn,
  .pl-facts,.hl-facts,.hl-pillars,.gl-facts,.el-facts,.el-notes,.el-flash,
  
  
  .bl2-routes,.bl2-criteria,.bl2-uses,.bl2-suits,.bl2-steps,
  .eb-grid,.eb-steps,.pt-steps,
  .ab-principles,.ab-eco-grid,.ab-links,
  .gz-basics-grid,.np-benefits,.np-steps,.np-grid,
  .bg-grid,.bg-next-grid,.sm-tips,.ct-steps,.ct-checks,
  .rel3-grid,.lf3-points,.fq-help-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  /* an odd last card spans the full row instead of leaving a hole */
  .hm-tiles>:last-child:nth-child(odd),.hm-steps>:last-child:nth-child(odd),.hm-kinds>:last-child:nth-child(odd),
  .hm-metrics>:last-child:nth-child(odd),.hm-learn>:last-child:nth-child(odd),
  .pl-facts>:last-child:nth-child(odd),.hl-facts>:last-child:nth-child(odd),.gl-facts>:last-child:nth-child(odd),
  .el-facts>:last-child:nth-child(odd),.el-notes>:last-child:nth-child(odd),.el-flash>:last-child:nth-child(odd),
  .bl2-uses>:last-child:nth-child(odd),.bl2-suits>:last-child:nth-child(odd),
  .bl2-steps>:last-child:nth-child(odd),
  .eb-grid>:last-child:nth-child(odd),.eb-steps>:last-child:nth-child(odd),
  .pt-steps>:last-child:nth-child(odd),.ab-principles>:last-child:nth-child(odd),.ab-eco-grid>:last-child:nth-child(odd),
  .ab-links>:last-child:nth-child(odd),.gz-basics-grid>:last-child:nth-child(odd),.np-benefits>:last-child:nth-child(odd),
  .np-steps>:last-child:nth-child(odd),.np-grid>:last-child:nth-child(odd),.bg-grid>:last-child:nth-child(odd),
  .bg-next-grid>:last-child:nth-child(odd),.sm-tips>:last-child:nth-child(odd),
  .ct-steps>:last-child:nth-child(odd),.ct-checks>:last-child:nth-child(odd),.rel3-grid>:last-child:nth-child(odd),
  .lf3-points>:last-child:nth-child(odd),.fq-help-grid>:last-child:nth-child(odd){
    grid-column:1/-1;
  }

  /* Tighter cards so two fit comfortably */
  .hm-tiles>*,.hm-steps>*,.hm-kinds>*,.hm-metrics>*,.hm-learn>*,
  .pl-facts>*,.hl-facts>*,.hl-pillars>*,.gl-facts>*,.el-facts>*,.el-notes>*,.el-flash>*,
  .bl2-routes>*,.bl2-criteria>*,.bl2-uses>*,.bl2-suits>*,.bl2-steps>*,
  .eb-grid>*,.eb-steps>*,.pt-steps>*,.ab-principles>*,.ab-eco-grid>*,.ab-links>*,
  .gz-basics-grid>*,.np-benefits>*,.np-steps>*,.np-grid>*,.bg-grid>*,.bg-next-grid>*,
  .sm-tips>*,.ct-steps>*,.ct-checks>*,.rel3-grid>*,.lf3-points>*,.fq-help-grid>*{
    padding:14px 12px!important;
    min-width:0;
    overflow-wrap:break-word;
  }
  .hm-tiles>* h3,.hm-steps>* h3,.hm-kinds>* h3,.hm-learn>* h3,
  .pl-facts>* h3,.hl-pillars>* h3,.bl2-uses>* h3,.bl2-suits>* h3,
  .eb-grid>* h3,.ab-principles>* h3,.np-benefits>* h3,.rel3-grid>* h3,.bg-grid>* h3{font-size:14.5px;line-height:1.3}
  .hm-tiles>* p,.hm-steps>* p,.hm-kinds>* p,.hm-learn>* p,
  .pl-facts>* p,.hl-pillars>* p,.bl2-uses>* p,.bl2-suits>* p,
  .eb-grid>* p,.ab-principles>* p,.np-benefits>* p,.rel3-grid>* p,.bg-grid>* p{font-size:12.5px;line-height:1.45}
  .bg-grid img,.rel3-grid img{max-height:110px;object-fit:cover}

  /* Blog cards: drop the excerpt so two fit side by side */
  .bg-grid>*{padding:0!important}
  .bl2-routes>* dl,.bl2-routes>* dd,.bl2-routes>* dt,.bl2-routes>* li,.bl2-criteria>* p{font-size:12px!important;line-height:1.4}
  .bl2-routes>* dl{margin:6px 0 0}
  .bl2-routes>* p,.bl2-criteria>* p{font-size:12px}
  .bg-card-body p{display:none}
  .bg-card-body{padding:10px 12px!important}

  /* Tools & guides: slim one-line rows instead of cramped two-up */
  .hm-learn{grid-template-columns:1fr!important;gap:8px!important}
  .hm-learn>*{grid-column:auto!important}
  .hm-learn a{gap:12px;padding:12px 14px!important;border-radius:14px}
  .hm-learn a>span{width:40px;height:40px;border-radius:12px}
  .hm-learn small{font-size:12.5px}

  /* Icon + text rows are too cramped two-up: keep them as slim single rows */
  .lf3-points,.ct-checks,.pl-facts,.hl-facts{grid-template-columns:1fr!important;gap:6px!important}
  .lf3-points>*,.ct-checks>*,.pl-facts>*,.hl-facts>*{grid-column:auto!important;padding:10px 12px!important}

  /* Loan-type chips / pills stay compact */
  .hm-types{gap:6px}

  /* Forms: field pairs side by side where they are short */
  .lf3-form,.em-inputs{gap:10px}

  /* Tables / wide blocks scroll inside their box */
  table{display:block;max-width:100%;overflow-x:auto}

  .ft3-main{gap:24px 16px;padding:30px 0 22px}
}

@media (max-width:360px){
  .container{padding-left:12px;padding-right:12px}
  main section p,main section li{font-size:14px}
}

/* ---------- Enquiry form (lead-form) on phones ---------- */
@media (max-width:640px){
  .lf3{padding:22px 0 26px}
  .lf3-card{border-radius:20px;box-shadow:0 14px 34px rgba(15,34,51,.12)}

  /* Side panel becomes a compact banner: title, 3 chips, call pill */
  .lf3-side{padding:20px 18px 18px}
  .lf3-side h2{font-size:22px;margin:0 0 12px}
  .lf3 .lf3-side>p{display:none}
  .lf3-points{display:flex!important;flex-wrap:wrap;gap:6px!important;margin:0}
  .lf3-points>li{display:inline-flex!important;align-items:center;padding:6px 11px!important;border-radius:999px;background:rgba(255,255,255,.12);grid-column:auto!important}
  .lf3-points li>span{display:none}
  .lf3-points b{font-size:12.5px;font-weight:700}
  .lf3-points small{display:none}
  .lf3-call{margin-top:14px;padding-top:0;gap:10px}
  .lf3-call small{font-size:11px}
  .lf3-call a{padding:8px 14px;font-size:14px}

  /* Form: two-column grid so short fields pair up */
  .lf3-form{padding:20px 16px 18px;grid-template-columns:1fr 1fr;gap:14px 12px}
  .lf3-form>*{grid-column:1/-1;min-width:0}
  .lf3-row{display:contents}
  .lf3-row>.lf3-field{grid-column:1/-1}
  .lf3-form .lf3-title{order:0;align-items:center;margin-bottom:0}
  .lf3-title h3{font-size:18px}
  .lf3-title small{font-size:11.5px;white-space:nowrap}

  /* order: name, mobile, need, city | amount, email, notes */
  .lf3-row:nth-of-type(2)>.lf3-field:nth-child(1){order:1}
  .lf3-row:nth-of-type(2)>.lf3-field:nth-child(2){order:2}
  .lf3-row:nth-of-type(4)>.lf3-field:nth-child(1){order:3}
  .lf3-row:nth-of-type(3)>.lf3-field:nth-child(2){order:4;grid-column:1/2}
  .lf3-row:nth-of-type(4)>.lf3-field:nth-child(2){order:4;grid-column:2/3}
  .lf3-row:nth-of-type(3)>.lf3-field:nth-child(1){order:5}
  .lf3-form>.lf3-field{order:6}
  .lf3-submit{order:7}
  .lf3-privacy{order:8}

  .lf3-field{gap:5px}
  .lf3-field>span{font-size:13px}
  .lf3-field>span em{display:none}          /* "(optional)" — the * already marks required */
  .lf3 .lf3-field input,.lf3 .lf3-field select{height:48px;font-size:16px;border-radius:12px;padding:0 13px;background-color:#FBFCFB}
  .lf3 .lf3-field select{padding-right:38px}
  .lf3 .lf3-field textarea{font-size:16px;min-height:72px;border-radius:12px}
  .lf3 .lf3-field input:focus,.lf3 .lf3-field select:focus,.lf3 .lf3-field textarea:focus{box-shadow:0 0 0 3px rgba(11,110,99,.16)}

  .lf3-submit{height:52px;border-radius:14px;font-size:16px;margin-top:2px}
  .lf3 .lf3-privacy{font-size:11.5px;justify-content:center;text-align:left}
}

/* ---------- EMI calculator: result panel on phones ---------- */
@media (max-width:640px){
  .em-result{padding:20px 16px 18px;gap:12px}
  /* EMI figure and donut share one row */
  .em-top{flex-direction:row!important;align-items:center;justify-content:space-between;gap:12px}
  .em-emi{min-width:0}
  .em-emi small{font-size:11px;letter-spacing:.12em}
  .em-emi strong{font-size:clamp(30px,9.5vw,38px);margin:2px 0 0}
  .em-emi span{font-size:12.5px;line-height:1.3;display:block}
  .em-donut{width:96px;height:96px}
  .em-donut>div{width:68px;height:68px}
  .em-donut small{font-size:8.5px;letter-spacing:.08em}
  .em-donut b{font-size:15px}

  /* principal / interest / fee as compact tiles */
  .em-legend{grid-template-columns:1fr 1fr;gap:8px}
  .em-legend li{padding:9px 10px 9px 14px;font-size:11.5px;border-radius:12px}
  .em-legend li i{top:10px;bottom:10px;width:3px}
  .em-legend b{font-size:15px}
  .em-legend .em-feeli{grid-column:1/-1}

  /* first-EMI split: one tidy card */
  .em-first{padding:11px 13px;gap:7px;border-radius:12px}
  .em-firsthead{flex-direction:column;align-items:flex-start;gap:3px;font-size:11.5px}
  .em-firsthead b{font-size:13px}
  .em-firstbar{height:9px}
  .em-firstkey{font-size:11px;gap:14px}

  /* facts + total */
  .em-facts{gap:8px}
  .em-facts>div{padding:10px 12px;border-radius:12px}
  .em-facts small{font-size:11px;letter-spacing:.02em}
  .em-facts b{font-size:16px;margin-top:3px}
  .em-total{padding-top:12px}
  .em-total span{font-size:13px}
  .em-total b{font-size:22px}

  /* Smart-borrowing tips: two per row, no eyebrow */
  .em-tipshead{margin-bottom:14px}
  .em-tipshead .em-eyebrow{display:none}
  .em-tips ul{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
  .em-tips li{padding:14px 12px 14px;gap:8px;border-radius:14px}
  .em-tips li>span{width:32px;height:32px;border-radius:10px}
  .em-tips b{font-size:14px}
  .em-tips p{display:none}
  .em-hero .container>p{display:none}
  .ft3-note{display:none}
  .em-hero{padding-bottom:64px}
}