/* /borrowers/how-a-loan-works/ — page-scoped CSS. Loads AFTER borrowers.css (shared borrower
   furniture: close band, entrances, links) and loan-programs.css (the shared borrower-interior
   FRAME: lp-g grid, lp-rail, lp-sec grounds, lp type roles). Everything here is this page's own
   composition, hlw- prefixed. */

.hlw-num{font-family:var(--font-display);font-size:15px;color:var(--brand-accent)}
.hlw-num.sun{font-size:18px}
.hlw-foot{font-family:var(--font-sans);font-size:14.5px;line-height:1.6;color:var(--text-muted);margin:44px 0 0}
.hlw-foot a{color:var(--sky-800);text-decoration:none}
.hlw-foot a:hover{color:var(--sun-700)}

/* ---- 1 hero: copy left six, tall 4:5 photograph right four — deliberately not the
   loan-programs 3:2 hero, so neighbouring borrower pages do not rhyme ---- */
.hlw-hero__g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 40px;align-items:center}
.hlw-hero__copy{grid-column:1 / span 6}
.hlw-hero__ph{grid-column:8 / span 4;margin:0;position:relative;isolation:isolate}
/* Interior-hero standard: quiet pale-Sky panel offset down-left behind the photograph. */
.hlw-hero__ph::before{content:"";position:absolute;inset:26px 44px -26px -26px;background:rgba(145,195,235,.30);border-radius:6px;z-index:-1}
.hlw-hero__ph img{display:block;width:100%;aspect-ratio:4 / 5;max-height:560px;object-fit:cover;border-radius:6px}
.hlw-hero__dev{grid-column:1 / -1;margin-top:24px}

/* ---- 2 the scenario: three numbered items in a row, one hairline above ---- */
.hlw-scn__g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 48px;border-top:2px solid var(--brand-navy);padding-top:26px}
.hlw-scn__i h3{font-family:var(--font-display);font-weight:500;font-size:23px;line-height:1.18;letter-spacing:-.015em;color:var(--brand-navy);margin:10px 0 0;max-width:15ch}
.hlw-scn__i p{font-family:var(--font-sans);font-size:15.5px;line-height:1.62;color:var(--text-secondary);margin:10px 0 0}
/* Start with the basics: one compact two-column hairline list, a starting point, not a package. */
.hlw-basics{margin:52px 0 0;max-width:58ch;padding-top:22px;border-top:2px solid var(--brand-navy)}
.hlw-basics__t{font-family:var(--font-sans);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--text-eyebrow);margin:0}
.hlw-basics__l{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
.hlw-basics__l li{font-family:var(--font-display);font-weight:500;font-size:20px;line-height:1.2;letter-spacing:-.012em;color:var(--brand-navy);padding:11px 0;border-bottom:1px solid rgba(0,43,84,.14)}
.hlw-basics__n{font-family:var(--font-sans);font-size:15px;line-height:1.6;color:var(--text-secondary);margin:16px 0 0;max-width:52ch}
.hlw-basics__cta{margin-top:22px}

/* ---- 3 the read: Navy 2×2 ---- */
.hlw-ev__h{font-size:42px;line-height:1.07;letter-spacing:-.026em;color:var(--text-inverse);margin:14px 0 0;max-width:18ch}
.hlw-ev__sf{font-family:var(--font-sans);font-size:17px;line-height:1.6;color:rgba(198,222,243,.9);margin:20px 0 0;max-width:54ch}
.hlw-ev__g{list-style:none;margin:52px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 56px}
.hlw-ev__i{border-top:1px solid rgba(145,195,235,.3);padding-top:18px}
.hlw-ev__i h3{font-size:24px;line-height:1.16;letter-spacing:-.015em;color:var(--text-inverse);margin:8px 0 0}
.hlw-ev__i p{font-family:var(--font-sans);font-size:15.5px;line-height:1.62;color:rgba(198,222,243,.86);margin:10px 0 0;max-width:52ch}

/* ---- 4 the structure: copy left, tall photograph right ---- */
.hlw-str__g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 40px;align-items:center}
.hlw-str__copy{grid-column:1 / span 7}
.hlw-str__l{margin:40px 0 0;border-top:1px solid var(--line)}
.hlw-str__r{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:8px 40px;padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline}
.hlw-str__r dt{font-family:var(--font-display);font-weight:500;font-size:21px;line-height:1.2;letter-spacing:-.013em;color:var(--brand-navy)}
.hlw-str__r dd{font-family:var(--font-sans);font-size:15px;line-height:1.62;color:var(--text-secondary);margin:0}
.hlw-str__ph{grid-column:9 / span 4;margin:0}
.hlw-str__ph img{display:block;width:100%;aspect-ratio:4 / 5;object-fit:cover;border-radius:6px}
.hlw-str__dev{grid-column:1 / -1;margin-top:24px}

/* ---- 5 diligence: four rows, key left / meaning right ---- */
.hlw-dg__l{margin:0;border-top:2px solid var(--brand-navy)}
.hlw-dg__r{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:10px 56px;padding:22px 0;border-bottom:1px solid var(--line);align-items:baseline}
.hlw-dg__r dt{font-family:var(--font-display);font-weight:500;font-size:23px;line-height:1.18;letter-spacing:-.014em;color:var(--brand-navy)}
.hlw-dg__r dd{font-family:var(--font-sans);font-size:15.5px;line-height:1.64;color:var(--text-secondary);margin:0;max-width:58ch}

/* ---- 6 closing: three numbered steps as rows ---- */
.hlw-cl__l{list-style:none;margin:0;padding:0;border-top:2px solid var(--brand-navy)}
.hlw-cl__r{display:flex;gap:28px;padding:22px 0;border-bottom:1px solid var(--line);align-items:baseline}
.hlw-cl__r h3{font-family:var(--font-display);font-weight:500;font-size:22px;line-height:1.18;letter-spacing:-.014em;color:var(--brand-navy);margin:0}
.hlw-cl__r p{font-family:var(--font-sans);font-size:15px;line-height:1.62;color:var(--text-secondary);margin:8px 0 0;max-width:64ch}

/* ---- 7 servicing: sticky promoted statement left, three items right ---- */
.hlw-sv__g{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:40px}
.hlw-sv__hd{grid-column:1 / span 5;position:sticky;top:128px;align-self:start}
.hlw-sv__promo{font-family:var(--font-display);font-weight:500;font-size:32px;line-height:1.18;letter-spacing:-.02em;color:var(--brand-navy);margin:14px 0 0;max-width:17ch}
.hlw-sv__l{grid-column:7 / span 5}
.hlw-sv__i+.hlw-sv__i{margin-top:30px}
.hlw-sv__i h3{font-size:21px;line-height:1.18;letter-spacing:-.013em;color:var(--brand-navy);margin:0}
.hlw-sv__i p{font-family:var(--font-sans);font-size:15.5px;line-height:1.64;color:var(--text-secondary);margin:9px 0 0;max-width:50ch}
.hlw-sv__l .hlw-foot{padding-top:20px;border-top:1px solid var(--line)}

/* ---- responsive ---- */
@container page (max-width:1180px){
  .hlw-ev__h{font-size:36px}
}
@container page (max-width:1000px){
  .hlw-sv__hd{position:static}
}
@container page (max-width:900px){
  .hlw-hero__g,.hlw-str__g,.hlw-sv__g{grid-template-columns:minmax(0,1fr);gap:32px}
  .hlw-hero__copy,.hlw-hero__ph,.hlw-hero__dev,.hlw-str__copy,.hlw-str__ph,.hlw-str__dev,.hlw-sv__hd,.hlw-sv__l{grid-column:1 / -1}
  .hlw-hero__ph,.hlw-str__ph{max-width:380px}
  .hlw-hero__ph::before{display:none}
  .hlw-scn__g{grid-template-columns:minmax(0,1fr);gap:28px}
  .hlw-ev__g{grid-template-columns:minmax(0,1fr);gap:32px}
  .hlw-ev__h{font-size:30px}
  .hlw-str__r,.hlw-dg__r{grid-template-columns:minmax(0,1fr);gap:8px}
  .hlw-sv__promo{font-size:26px}
}
@container page (max-width:620px){
  .hlw-hero__g,.hlw-str__g,.hlw-sv__g,.hlw-scn__g,.hlw-ev__g,.hlw-str__r,.hlw-dg__r{grid-template-columns:minmax(0,1fr);column-gap:0}
  .hlw-cl__r{flex-direction:column;gap:8px}
  .hlw-basics__l{grid-template-columns:1fr}
}