/* finance.html - Asset refinance. House variables only; same rules as site-v2.css. */

/* Reading measure */
.fin-measure{max-width:66ch}
.fin-measure + .fin-measure{margin-top:var(--mcf-s4)}

/* Who it is for: nine situations on hairlines, not cards */
.fin-uses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--mcf-s6)}
.fin-uses li{border-top:1px solid var(--mcf-line);padding-block:var(--mcf-s5) var(--mcf-s6)}
.fin-uses h3{font-size:var(--mcf-size-heading);font-weight:600;margin-bottom:var(--mcf-s2)}
.fin-uses p{color:var(--mcf-grey);max-width:40ch}

/* The figures that shape a refinance */
.fin-figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--mcf-s6);padding-block:var(--mcf-s6);border-block:1px solid var(--mcf-line);margin-block:var(--mcf-s7) var(--mcf-s8)}
.fin-figs b{display:block;font-size:var(--mcf-size-page);font-weight:700;letter-spacing:-.02em;line-height:1.1;margin-bottom:var(--mcf-s2)}
.fin-figs span{display:block;color:var(--mcf-grey);font-size:var(--mcf-size-table);max-width:26ch}

/* The storybook */
.fin-story{align-items:center;gap:var(--mcf-s8)}
.fin-story > .illo{width:100%;max-width:440px}
.fin-story .t-section{margin-bottom:var(--mcf-s4)}
.fin-pull{font-size:var(--mcf-size-section);font-weight:600;line-height:1.3;letter-spacing:-.01em;margin-top:var(--mcf-s5);max-width:32ch}

/* What can be refinanced: four kinds, each with its drawing */
.fin-kinds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--mcf-s5)}
.fin-kind{display:grid;grid-template-columns:168px 1fr;gap:var(--mcf-s5);align-items:center;background:var(--mcf-card);border-radius:var(--mcf-r-card);padding:var(--mcf-s5) var(--mcf-s6) var(--mcf-s5) var(--mcf-s4)}
.fin-kind .illo{width:168px}
.fin-kind h3{font-size:var(--mcf-size-heading);font-weight:600;margin-bottom:var(--mcf-s2)}
.fin-kind p{color:var(--mcf-grey)}

/* The five steps: a numbered list read down the page - heading left, what happens right */
.fin-steps{counter-reset:fstep;border-top:1px solid var(--mcf-line)}
.fin-steps li{counter-increment:fstep;display:grid;grid-template-columns:4fr 8fr;gap:var(--mcf-s6);padding-block:var(--mcf-s5);border-bottom:1px solid var(--mcf-line)}
.fin-steps h4{font-size:var(--mcf-size-heading);font-weight:600;display:flex;gap:var(--mcf-s3);align-items:baseline}
.fin-steps h4::before{content:counter(fstep);font-size:var(--mcf-size-title);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1;min-width:1.2em}
.fin-steps p{color:var(--mcf-grey);max-width:62ch;text-wrap:pretty}

/* Donnie, on his own, for anything not on the list */
.fin-kind-other{grid-column:1 / -1;grid-template-columns:96px 1fr}
.fin-kind-other img{width:84px;height:98px;justify-self:center}

/* The cases and the close are shared with the trade pages: site-v2.css (WEB-058) */

@media (max-width:1024px){
  .fin-figs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fin-kinds{grid-template-columns:1fr}
}
@media (max-width:900px){
  .fin-steps li{grid-template-columns:1fr;gap:var(--mcf-s2)}
  .fin-uses{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fin-story{gap:var(--mcf-s6)}
}
@media (max-width:640px){
  .fin-uses{grid-template-columns:1fr}
  .fin-uses li{padding-block:var(--mcf-s4)}
  .fin-uses p{font-size:var(--mcf-size-table)}
  .fin-figs{gap:var(--mcf-s5);margin-block:var(--mcf-s6)}
  .fin-figs b{font-size:var(--mcf-size-title)}
  .fin-kind{grid-template-columns:96px 1fr;padding:var(--mcf-s4);gap:var(--mcf-s4)}
  .fin-kind .illo{width:96px}
  .fin-kind-other{grid-template-columns:64px 1fr}
  .fin-kind-other img{width:56px;height:66px}
}