/* ============================================================
   Bank-programme intro screens — refreshed look for:
     /ES  EasySell           (.bankintro--es)
     /QS  Quick Sell         (.bankintro--qs)
     /SA  Sell Assist        (.bankintro--sa)
   Standalone — does NOT depend on agent_portal.css. Bank accent
   is driven by --bi-accent on the variant class.
   ============================================================ */


.bankintro {
  --bi-bg:        #FFFFFF;
  --bi-surface:   #FFFFFF;
  --bi-surface-2: #F6F4F0;
  --bi-ink:       #1A1612;
  --bi-ink-2:     #4A453E;
  --bi-ink-3:     #807A72;
  --bi-line:      rgba(26,22,18,.14);
  --bi-line-2:    rgba(26,22,18,.06);
  --bi-green-soft:#E5F1EA;
  --bi-green-2:   #0E6640;
  --bi-red:       #C13B30;
  --bi-red-soft:  #F7E2DF;

  --bi-r-sm: 12px;
  --bi-r-md: 16px;
  --bi-r-lg: 22px;
  --bi-shadow-sm: 0 1px 0 rgba(26,22,18,.04), 0 1px 2px rgba(26,22,18,.04);
  --bi-shadow-md: 0 1px 2px rgba(26,22,18,.04), 0 8px 24px -8px rgba(26,22,18,.10);

  /* Default accent (overridden per bank) */
  --bi-accent:    #157F50;
  --bi-accent-2:  #0E6640;
  --bi-accent-soft: rgba(21,127,80,.10);

  --bi-fs-body: 15px;
  --bi-lh-body: 1.55;

  max-width: 980px;
  margin: 24px auto 48px;
  padding: 0 16px;
  font-family: "PT Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--bi-fs-body);
  line-height: var(--bi-lh-body);
  color: var(--bi-ink);
}

.bankintro * { box-sizing: border-box; }
/* Selectors below are prefixed with `body.myroof` so they beat
   the global `body.myroof p { font-size: large }` / `body.myroof h2`
   rules in base.css (which have (0,1,2) specificity). */
body.myroof .bankintro p {
  margin: 0 0 12px;
  font-size: var(--bi-fs-body);
  line-height: var(--bi-lh-body);
}
body.myroof .bankintro p:last-child { margin-bottom: 0; }
body.myroof .bankintro h1,
body.myroof .bankintro h2,
body.myroof .bankintro h3,
body.myroof .bankintro h4 {
  font-family: "PT Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body.myroof .bankintro ul {
  margin: 0 0 12px 22px;
  padding: 0;
}
body.myroof .bankintro ul li {
  font-size: var(--bi-fs-body);
  line-height: var(--bi-lh-body);
  padding: 2px 0;
}

/* Bank accent variants ----------------------------------------- */
.bankintro--es {
  --bi-accent: #003A9B;
  --bi-accent-2: #00277A;
  --bi-accent-soft: rgba(0,58,155,.10);
}
.bankintro--qs {
  /* FNB teal — confirmed brand colour. */
  --bi-accent: #00A9AC;
  --bi-accent-2: #007F82;
  --bi-accent-soft: rgba(0,169,172,.12);
}
.bankintro--sa {
  /* SA Home Loans orange — see sahl_join_program.css. */
  --bi-accent: #FF6600;
  --bi-accent-2: #CC5200;
  --bi-accent-soft: rgba(255,102,0,.10);
}

/* Hero block --------------------------------------------------- */
.bankintro__hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  background: var(--bi-surface);
  border: 1px solid var(--bi-line);
  border-radius: var(--bi-r-lg);
  padding: 26px 28px;
  box-shadow: var(--bi-shadow-sm);
  margin-bottom: 22px;
}

.bankintro__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  background: var(--bi-accent-soft);
  color: var(--bi-accent-2);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.bankintro__title {
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -.01em;
  font-weight: 700;
  margin: 0;
  color: var(--bi-ink);
}
@media (max-width: 640px) { .bankintro__title { font-size: 24px; } }

.bankintro__lede {
  color: var(--bi-ink-2);
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  max-width: 64ch;
}

.bankintro__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.bankintro__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  height: 48px;
  padding: 0 28px;
  border-radius: 999px;
  border: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, transform .12s;
}
.bankintro__btn--primary {
  background: var(--bi-accent);
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(0,0,0,.25);
}
.bankintro__btn--primary:hover { background: var(--bi-accent-2); color: #fff; }
.bankintro__btn--primary:active { transform: scale(.97); }

/* Current-leads chip list ------------------------------------- */
.bankintro__leads {
  margin-bottom: 22px;
}
.bankintro__leads h2 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bi-ink-3);
  margin: 0 0 10px;
}
.bankintro__leadlist {
  display: grid;
  gap: 10px;
}
.bankintro__lead {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
  background: var(--bi-surface);
  border: 1px solid var(--bi-line);
  border-radius: var(--bi-r-md);
  padding: 12px 16px;
  text-decoration: none;
  color: var(--bi-ink);
  box-shadow: var(--bi-shadow-sm);
  transition: box-shadow .15s, border-color .15s;
}
.bankintro__lead:hover {
  box-shadow: var(--bi-shadow-md);
  border-color: var(--bi-accent);
  color: var(--bi-ink);
}
.bankintro__lead .address {
  font-weight: 700;
  font-size: var(--bi-fs-body);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bankintro__lead .acc_no {
  font-size: 12px;
  color: var(--bi-ink-3);
  letter-spacing: .04em;
  font-feature-settings: "tnum" 1;
}
.bankintro__lead .status {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bi-accent-soft);
  color: var(--bi-accent-2);
}
@media (max-width: 640px) {
  .bankintro__lead { grid-template-columns: 1fr; gap: 6px; }
}

/* Body cards --------------------------------------------------- */
.bankintro__card {
  background: var(--bi-surface);
  border: 1px solid var(--bi-line);
  border-radius: var(--bi-r-md);
  padding: 20px 24px;
  box-shadow: var(--bi-shadow-sm);
  margin-bottom: 18px;
}
.bankintro__card h2 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.005em;
  margin: 0 0 12px;
  color: var(--bi-ink);
  line-height: 1.25;
}
.bankintro__card h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 16px 0 8px;
  color: var(--bi-ink);
}
.bankintro__card ul {
  margin: 0 0 12px 22px;
  padding: 0;
  list-style: disc;
}
.bankintro__card ul li {
  font-size: var(--bi-fs-body);
  line-height: var(--bi-lh-body);
  padding: 2px 0;
}

/* Comparison table --------------------------------------------- */
.bankintro__compare {
  background: var(--bi-surface);
  border: 1px solid var(--bi-line);
  border-radius: var(--bi-r-md);
  padding: 18px 22px 20px;
  box-shadow: var(--bi-shadow-sm);
  margin-bottom: 22px;
  overflow-x: auto;
}
.bankintro__compare h2 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 10px;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--bi-ink);
}
.bankintro__compare table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  line-height: 1.35;
  min-width: 560px;
}
.bankintro__compare thead th {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  padding: 8px 12px;
  color: var(--bi-ink-3);
  text-align: left;
  border-bottom: 1px solid var(--bi-line);
}
.bankintro__compare thead th.bi-program {
  color: var(--bi-green-2);
  background: var(--bi-green-soft);
  text-align: right;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.bankintro__compare thead th.bi-sheriff {
  color: var(--bi-red);
  background: var(--bi-red-soft);
  text-align: right;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.bankintro__compare tbody td {
  padding: 6px 12px;
  border-bottom: 1px solid var(--bi-line-2);
  font-feature-settings: "tnum" 1;
}
.bankintro__compare tbody tr:last-child td { border-bottom: 0; }
.bankintro__compare td.bi-letter {
  width: 32px;
  color: var(--bi-ink-3);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .02em;
  text-align: center;
}
.bankintro__compare td.bi-label {
  color: var(--bi-ink);
  font-size: 14px;
}
.bankintro__compare td.bi-program {
  text-align: right;
  color: var(--bi-ink);
  background: var(--bi-green-soft);
  font-feature-settings: "tnum" 1;
}
.bankintro__compare td.bi-sheriff {
  text-align: right;
  color: var(--bi-ink);
  background: var(--bi-red-soft);
  font-feature-settings: "tnum" 1;
}

/* Highlighted summary rows — the "Monthly repayment" / "Total repayment"
   takeaway lines need to read louder than the rest. */
.bankintro__compare tr.bi-highlight td {
  background: #EEEEEE;
}
.bankintro__compare tr.bi-highlight td.bi-program {
  background: #C9E2D2;
  color: var(--bi-green-2);
  font-weight: 700;
}
.bankintro__compare tr.bi-highlight td.bi-sheriff {
  background: #F0C9C5;
  color: var(--bi-red);
  font-weight: 700;
}
.bankintro__compare tr.bi-highlight td.bi-label {
  text-align: right;
  font-weight: 700;
  color: var(--bi-ink);
}

/* Yes / No rows — quieter than the financial block. */
.bankintro__compare tr.bi-yesno td.bi-program,
.bankintro__compare tr.bi-yesno td.bi-sheriff {
  font-size: 13px;
  letter-spacing: 0;
  font-weight: 600;
}
.bankintro__compare tr.bi-yesno td.bi-label {
  text-align: right;
  color: var(--bi-ink-2);
}

.bankintro__compare sup {
  font-size: 10px;
  color: var(--bi-ink-3);
  font-weight: 400;
  margin-left: 2px;
}
.bankintro__compare__footnotes {
  margin-top: 14px;
  padding: 12px 14px 4px;
  border-top: 1px solid var(--bi-line-2);
  font-size: 12px;
  color: var(--bi-ink-3);
}
.bankintro__compare__footnotes p { margin: 0 0 8px; }
.bankintro__compare__footnotes p:last-child { margin-bottom: 0; }

/* Bottom CTA strip --------------------------------------------- */
.bankintro__footer {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}