/* Homepage "Save money" column: sample-flat cost bar under "Full cost upfront".
   Numbers = the True cost tool's own sample (DEMO.a in true-cost-of-flat-bangalore.js, run
   through its compute(): GST on parking/club and on maintenance ticked, city corporation).
   Widths: base drawn cut short at 30%, the 5 add-on groups share 70% in proportion. */
.hc-card{grid-column:2;margin:18px 0 4px;padding:20px 20px 18px;background:#173a5c;border:1px solid #ffffff1f;border-radius:6px;--hc-base:#c9d6e2;--hc-1:#f8dca0;--hc-2:#f5c46a;--hc-3:#f2a93b;--hc-4:#e3862c;--hc-5:#d0612a}
.hc-tag{display:inline-block;background:#b6e477;color:#102b46;font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:3px 8px;border-radius:2px}
.hc-nums{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:14px 0 0;font-family:var(--serif,Georgia,serif);line-height:1;letter-spacing:-.03em}
.hc-nums small{font-family:-apple-system,'Segoe UI',Arial,sans-serif;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#9fb6ca;margin-right:6px;vertical-align:.25em}
.hc-q{font-size:1.6rem;color:#c9d6e2}
.hc-arrow{font-size:1.4rem;color:#f2a93b}
.hc-a{font-size:2.5rem;color:#f2a93b}
.hc-bar{display:flex;gap:2px;height:26px;margin-top:18px;border-radius:3px;overflow:hidden}
.hc-s{display:block;height:100%;flex:0 1 auto;min-width:3px}
.hc-base{flex-basis:30%;background:var(--hc-base);-webkit-mask:linear-gradient(90deg,#000 0 calc(100% - 12px),transparent calc(100% - 12px) calc(100% - 9px),#000 calc(100% - 9px) calc(100% - 6px),transparent calc(100% - 6px));mask:linear-gradient(90deg,#000 0 calc(100% - 12px),transparent calc(100% - 12px) calc(100% - 9px),#000 calc(100% - 9px) calc(100% - 6px),transparent calc(100% - 6px))}
.hc-bar .hc-s1{flex-basis:9.54%}
.hc-bar .hc-s2{flex-basis:10.96%}
.hc-bar .hc-s3{flex-basis:8.72%}
.hc-bar .hc-s4{flex-basis:16.55%}
.hc-bar .hc-s5{flex-basis:24.22%}
.hc-s1{background:var(--hc-1)}
.hc-s2{background:var(--hc-2)}
.hc-s3{background:var(--hc-3)}
.hc-s4{background:var(--hc-4)}
.hc-s5{background:var(--hc-5)}
.hc-ends{display:flex;justify-content:space-between;gap:10px;margin-top:6px;font-size:.74rem;color:#9fb6ca}
.hc-ends span:last-child{color:#f2a93b;font-weight:600}
.hc-ends small{font-size:inherit;opacity:.75}
.hc-key{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:5px}
.hc-key li{display:flex;align-items:center;gap:8px;padding:0;border:0;font-size:.82rem;line-height:1.3;color:#dbe5ee;counter-increment:none}
.hc-key li:before{content:none}
.hc-key i{flex:0 0 10px;height:10px;border-radius:2px}
.hc-key b{margin-left:auto;font-weight:600;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.hc-card figcaption{margin-top:16px;padding-top:14px;border-top:1px solid #ffffff1f;font-size:.92rem;line-height:1.45;color:#dbe5ee}
.hc-card figcaption b{color:#f2a93b;font-family:var(--serif,Georgia,serif);font-size:1.15rem;font-weight:400}
.hc-card figcaption a{color:#b6e477;font-weight:600;text-decoration:none;white-space:nowrap}
.hc-card figcaption a:hover{text-decoration:underline}
@media (max-width:600px){
  .hc-card{grid-column:1/-1;padding:16px 14px}
  .hc-q{font-size:1.15rem}
  .hc-nums{gap:4px 8px}
  .hc-nums small{margin-right:3px;font-size:.6rem}
  .hc-arrow{font-size:1.1rem}
  .hc-a{font-size:1.75rem}
}