/* /brokers/working-with-alliance/ — page-scoped CSS.

   A persuasive broker STORY, not a product page. Five large editorial chapters, one dominant idea
   each, scannable by headline alone: difficult deals, timing, broker economics, the client
   relationship, and proof. No cards, grids or collections of mini-features — the only intentional
   collection is the Proof rail, where real transactions belong. No sections within sections.

   Reuses the interior-page sticky-rail frame (loan-programs.css: .lp-g / .lp-body / .lp-rail /
   .lp-sec grounds / .lp-colw), the standard standalone hero (loan-programs Paper hero + offset
   panel), and the broker furniture from brokers.css (the Success Story rail read broker-side, the
   bk-cl Navy close, bk-rv entrances via brokers-motion.js). loan-programs.js drives the rail. */

main{--bkw-r:6px}

/* ---- the editorial chapter: a dominant headline over flowing prose ---- */
.bkw-ch__h{font-family:var(--font-display);font-weight:500;font-size:44px;line-height:1.08;letter-spacing:-.024em;color:var(--brand-navy);margin:14px 0 0;max-width:24ch}
.bkw-ch__h.inv{color:var(--text-inverse)}
.bkw-ch__lede{font-family:var(--font-sans);font-size:20px;line-height:1.6;color:var(--text-secondary);margin:24px 0 0;max-width:58ch}
.bkw-ch__lede.inv{color:var(--sky-300)}
.bkw-ch__p{font-family:var(--font-sans);font-size:18px;line-height:1.68;color:var(--text-secondary);margin:20px 0 0;max-width:58ch}
.bkw-ch__p.inv{color:rgba(198,222,243,.88)}
.bkw-ch__p strong{font-weight:600;color:var(--brand-navy)}
.bkw-ch__p.inv strong{color:var(--text-inverse)}
.bkw-ch__act{margin:30px 0 0}

/* The early read: the initial-scenario basics as one compact two-column hairline list inside the
   prose column, a starting point, not a package. */
.bkw-basics{margin:34px 0 0;max-width:58ch;padding-top:22px;border-top:2px solid var(--brand-navy)}
.bkw-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}
.bkw-basics__l{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
.bkw-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)}
.bkw-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}

/* Timing chapter: prose with ONE supporting photograph — a single image, not a module grid. */
.bkw-ch__g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 48px;align-items:center}
.bkw-ch__copy{grid-column:1 / span 6}
.bkw-ch__ph{grid-column:8 / span 5;margin:0}
.bkw-ch__ph img{display:block;width:100%;aspect-ratio:4 / 5;object-fit:cover;border-radius:var(--bkw-r)}
.bkw-ch__dev{grid-column:1 / -1;margin-top:22px}

/* Broker-economics proof line: one Newsreader statement carrying a real approved figure inline in
   the story — not a boxed stat card. */
.bkw-proof{margin:32px 0 0;padding:24px 0 0;border-top:2px solid var(--brand-accent);max-width:48ch}
.bkw-proof__v{font-family:var(--font-display);font-weight:500;font-size:31px;line-height:1.14;letter-spacing:-.02em;color:var(--text-inverse);margin:0}
.bkw-proof__v em{font-style:normal;font-size:1.28em;color:var(--brand-sky)}
.bkw-proof__l{font-family:var(--font-sans);font-size:14px;line-height:1.55;color:var(--sky-300);margin:10px 0 0}

/* ---- Proof chapter: the broker-side Success Story rail, two full cards + a 48px peek ---- */
.bkw-prf .bk-rail__c{--bk-w:calc((100% - 16px - 48px) / 2)}
.bkw-prf .bk-prf__head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.bkw-prf .bk-prf__nav{display:flex;align-items:center;gap:10px}

/* ---- responsive ---- */
@container page (max-width:1180px){
  .bkw-ch__h{font-size:38px}
}
@container page (max-width:1000px){
  /* Rail drops per the interior-page standard; the peek widens so two cards still fit. */
  .bkw-prf .bk-rail__c{--bk-w:340px}
}
@container page (max-width:900px){
  .bkw-ch__g{grid-template-columns:minmax(0,1fr);gap:32px}
  .bkw-ch__copy,.bkw-ch__ph,.bkw-ch__dev{grid-column:1 / -1}
  .bkw-ch__ph{max-width:460px}
  .bkw-ch__ph img{aspect-ratio:3 / 2}
  .bkw-ch__h{font-size:32px}
}
@container page (max-width:620px){
  .bkw-basics__l{grid-template-columns:1fr}
  .bkw-ch__h{font-size:27px}
  .bkw-ch__lede{font-size:18px}
}